Pin Input

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

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" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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

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" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

`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

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