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
colorSchemeDescription
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"isDisabled
isDisabledDescription
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
booleanDefault
falseisInvalid
isInvalidDescription
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
booleanDefault
falseisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanDefault
falseisRequired
isRequiredDescription
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
booleanDefault
falsesize
sizeDescription
The size of the Input
Type
"lg" | "md" | "sm" | "xs"Default
mdvariant
variantDescription
The variant of the Input
Type
"outline" | "filled" | "flushed" | "unstyled"Default
outline