Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

PinInput

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

Source@yamada-ui/pin-input

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!

Keyboard Navigation

KeyDescriptionState
TabMove the focus to the next item.-
ArrowRightMove the focus to the next item.-
ArrowLeftMove the focus to the previous item.-

ARIA Roles and Attributes

ComponentRole and AttributesUsage
PinInputrole="group"Indicates that this is a group.
PinInputFieldaria-invalidSet to "true" if isInvalid is set.
aria-disabledSet to "true" if isDisabled is set.
aria-readonlySet to "true" if isReadOnly is set.
aria-requiredSet to "true" if isRequired is set.

Edit this page on GitHub

PreviousPasswordInputNextPhoneInput