The visual color appearance of the component
Pin Input
The PinInput component is similar to the Input component, but is optimized for entering sequences of digits quickly.
Props#
PinInputField#
PinInputField composes Input
so you can pass all Input
props.
colorScheme
colorScheme
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
isDisabled
isDisabled
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
boolean
false
isInvalid
isInvalid
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
boolean
false
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
false
isRequired
isRequired
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
boolean
false
size
size
The size of the Input
"lg" | "md" | "sm" | "xs"
md
variant
variant
The variant of the Input
"outline" | "filled" | "flushed" | "unstyled"
outline