Capture pin code or one time password from the user
PinInput can be used with uncontrolled forms the same way as a native input element. Set the name attribute to include pin input value in FormData object on form submission. To control the initial value in uncontrolled forms, use the defaultValue prop.
Example usage of uncontrolled PinInput with FormData :
You can use a regular expression to validate user input. Characters that do not match the given expression will be disregarded. For example, to create a PinInput that will accept only numbers from 0 to 3 , set type={/^[0-3]+/} :
Some operating systems expose the last received SMS code to be used by applications like your keyboard. If the current form input asks for this code, your keyboard adapts and proposes the code as a keyboard suggestion. The oneTimeCode prop makes your input set autocomplete="one-time-code" which allows using that feature.
PinInput supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
Inputs do not have associated labels. Set aria-label to make the component visible to screen readers: