Pin field

<PinField defaultValue="25" />

Pass a required name property to it to start using PinField. Add onChange for connecting the change events with your local state.

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

Same as in native React inputs, PinField can be used as a controlled or uncontrolled component. By default, PinField is uncontrolled and lets you 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 you don't need to control the further behavior of the input.

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

If you need to control the state of the field manually, use the value property. That will give you complete control of the component value and will stop handling the change events automatically. You will have to update the state using the onChange handler and will be able to add custom logic before the value is updated.

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

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 3 sizes, with the medium size used by default. All sizes are aligned with 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>

You can change the PinField size based on the viewport with the responsive property syntax.

<PinField name="pin" size={{ s: "medium", l: "xlarge" }} />

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, however 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 uses a native input internally to handle value input and syncs the value selection with the rendered characters.

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