PinInput

PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.

If you are not using Fieldset, set aria-label or aria-labelledby to PinInput.

<PinInput aria-label="Please one-time password" />

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    Please one-time password
  </Text>

  <PinInput aria-labelledby="label" />
</VStack>

Copied!

Key	Description	State
`Tab`	Move the focus to the next item.	-
`ArrowRight`	Move the focus to the next item.	-
`ArrowLeft`	Move the focus to the previous item.	-

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`PinInput`	`role="group"`	Indicates that this is a group.
`PinInputField`	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-required`	Set to `"true"` if `isRequired` is set.

Edit this page on GitHub