Pin Input

The PinInput component is optimized for entering sequences of digits. The most
common application is for entering single-use security codes. It is optimized
for entering digits quickly.

Installation

``sh
yarn add @chakra-ui/pin-input

or

npm i @chakra-ui/pin-input
`

Import component

`jsx
import {
PinInput,
PinInputField,
usePinInput,
usePinInputField,
} from "@chakra-ui/pin-input"
`

Usage

Chakra UI exports two primary components, PinInput and PinInputField to
compose a PinInput component. Chakra UI also provides hooks to can create a
custom PinInput component.

`jsx





`

`jsx
function PinInputHookExample() {
const context = usePinInput({ autoFocus: true })
const input1 = usePinInputField({ context })
const input2 = usePinInputField({ context })
const input3 = usePinInputField({ context })
const input4 = usePinInputField({ context })

return (



)
}
`

Sizes

`jsx





`

Controlled

`tsx
function ControlledPinInput() {
const [value, setValue] = React.useState("")

const handleChange = (value: string) => {
setValue(value)
}

const handleComplete = (value: string) => {
console.log(value)
}
return (





)
}
``