93 lines
1.7 KiB
Markdown
93 lines
1.7 KiB
Markdown
# 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
|
|
<PinInput defaultValue="234">
|
|
<PinInputField />
|
|
<PinInputField />
|
|
<PinInputField />
|
|
</PinInput>
|
|
```
|
|
|
|
```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 (
|
|
<div>
|
|
<input style={style} {...input1} />
|
|
<input style={style} {...input2} />
|
|
<input style={style} {...input3} />
|
|
<input style={style} {...input4} />
|
|
</div>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Sizes
|
|
|
|
```jsx
|
|
<PinInput size="lg" defaultValue="234">
|
|
<PinInputField />
|
|
<PinInputField />
|
|
<PinInputField />
|
|
</PinInput>
|
|
```
|
|
|
|
## Controlled
|
|
|
|
```tsx
|
|
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>
|
|
)
|
|
}
|
|
```
|