Pin field

Pass a required name property to start using PinField. Add an onChange handler to connect the change events with your local state.

<PinField name="pin" onChange={console.log} />

Same as native React inputs, PinField can be used as a controlled or uncontrolled component. By default, PinField is uncontrolled and allows you to define its defaultValue property. In this case, all change events are handled automatically. This approach is helpful when you're pre-filling a form from a data source but don't need to control the input's further behavior.

<PinField name="pin" defaultValue="2543" />

If you need to control the state of the field manually, use the value property. This gives you complete control of the component's value and stops automatic handling of change events. You will need to update the state using the onChange handler and can add custom logic before the value is updated.

<PinField
  name="pin"
  value="2543"
  onChange={({ value }) => {
    /* Update your state here */
    console.log({ value });
  }}
/>

Control the length of the pin code with the valueLength property.

<PinField name="pin" valueLength={6} />

Pick a numeric, alphabetic, or alphanumeric pin code format with the pattern property.

<PinField name="pin" pattern="alphabetic" defaultValue="ab" />

PinField comes in three sizes, with the medium size used by default. All sizes align with the sizes of other related components like Button or Select.

<View gap={3}>
  <PinField name="pin" size="medium" />
  <PinField name="pin" size="large" />
  <PinField name="pin" size="xlarge" />
</View>

Use the faded variant to alternate the styles of the input fields.

<PinField name="pin" variant="faded" />

PinField is integrated with the FormControl utility. If you need to add a label or a caption to the field, wrap it with FormControl, and it will handle all accessibility requirements for you.

<FormControl>
  <FormControl.Label>Pin code</FormControl.Label>
  <PinField name="pin" />
</FormControl>

PinField comes with some HTML attributes pre-defined, but you can add more with the inputAttributes property. For example, you can change the default autocomplete attribute from one-time-code to a different value.

<PinField name="zip" inputAttributes={{ type: "zip-code" }} />

PinField supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<PinField size={{ s: 'medium', l: 'large' }}>

PinField uses a native input internally to handle value input and syncs the value selection with the rendered characters.

• ArrowLeft: Move caret to the previous character
• ArrowRight: Move caret to the next character
• Meta + ArrowLeft: Move caret to the first character
• Meta + ArrowRight: Move caret to the last character
• Backspace: Delete the current character and move to the last available input

• When using PinField without a label, make sure to provide a text description. You can either provide the label using the FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.

<PinField name="pin" inputAttributes={{ "aria-label": "Pin code" }} />