Pin Input

The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.

    SourceTheme Source@chakra-ui/pin-input

Props#

autoFocus

Description

If true, the pin input receives focus on mount

Type
boolean

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"

defaultValue

Description

The default value of the pin input

Type
string

errorBorderColor

Description

The border color when the input is invalid. Use color keys in `theme.colors`

Type
string

focusBorderColor

Description

The border color when the input is focused. Use color keys in `theme.colors`

Type
string

id

Description

The top-level id string that will be applied to the input fields. The index of the input will be appended to this top-level id.

Type
string

isDisabled

Description

If true, the pin input component is put in the disabled state

Type
boolean

isInvalid

Description

If true, the pin input component is put in the invalid state

Type
boolean

manageFocus

Description

If true, focus will move automatically to the next input once filled

Type
boolean
Default
true

mask

Description

If true, the input's value will be masked just like `type=password`

Type
boolean

onChange

Description

Function called on input change

Type
(value: string) => void

onComplete

Description

Function called when all inputs have valid values

Type
(value: string) => void

otp

Description

If true, the pin input component signals to its fields that they should use `autocomplete="one-time-code"`.

Type
boolean

placeholder

Description

The placeholder for the pin input

Type
string

size

Description

The size of the PinInput

Type
"lg" | "md" | "sm" | "xs"
Default
md

type

Description

The type of values the pin-input should allow

Type
"number" | "alphanumeric"

value

Description

The value of the pin input. This is the value that will be returned when the pin input is filled

Type
string

variant

Description

The variant of the PinInput

Type
"outline" | "flushed" | "filled" | "unstyled"
Default
outline

PinInputField#

PinInputField composes Input so you can pass all Input props.

colorScheme

Description

The visual color appearance of the component

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink"

isDisabled

Description

If true, the form control will be disabled. This has 2 side effects: - The FormLabel will have `data-disabled` attribute - The form element (e.g, Input) will be disabled

Type
boolean
Default
false

isInvalid

Description

If true, the form control will be invalid. This has 2 side effects: - The FormLabel and FormErrorIcon will have `data-invalid` set to true - The form element (e.g, Input) will have `aria-invalid` set to true

Type
boolean
Default
false

isReadOnly

Description

If true, the form control will be readonly

Type
boolean
Default
false

isRequired

Description

If true, the form control will be required. This has 2 side effects: - The FormLabel will show a required indicator - The form element (e.g, Input) will have `aria-required` set to true

Type
boolean
Default
false

size

Description

The size of the Input

Type
"lg" | "md" | "sm" | "xs"
Default
md

variant

Description

The variant of the Input

Type
"outline" | "filled" | "flushed" | "unstyled"
Default
outline
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel