README
Pin Input
The PinInupt 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
yarn add @chakra-ui/pin-input
or
npm i @chakra-ui/pin-input
Import component
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.
<PinInput defaultValue="234">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
function PinInputHookExample() {
const context = usePinInput({ autoFocus: true })
const input1 = usePinInputField({ context })
const input2 = usePinInputField({ context })
const input3 = usePinInputField({ context })
const input4 = usePinInputField({ context })
return (
<div>
<input style={style} {...input1} />
<input style={style} {...input2} />
<input style={style} {...input3} />
<input style={style} {...input4} />
</div>
)
}
Sizes
<PinInput size="lg" defaultValue="234">
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
Controlled
function ControlledPinInput() {
const [value, setValue] = React.useState("")
const handleChange = (value: string) => {
setValue(value)
}
const handleComplete = (value: string) => {
console.log(value)
}
return (
<PinInput value={value} onChange={handleChange} onComplete={handleComplete}>
<PinInputField />
<PinInputField />
<PinInputField />
</PinInput>
)
}