Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.
Input
Input component is a component that is used to get user input in a text field.
Props#
The Input component composes Box so you can
pass all Box props, and React.InputHTMLAttributes.
colorScheme
colorSchemeDescription
Type
(string & {})errorBorderColor
errorBorderColorDescription
The border color when the input is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the input is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringhtmlSize
htmlSizeDescription
The native HTML size attribute to be passed to the input
Type
numberisDisabled
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
booleanisInvalid
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
booleanisReadOnly
isReadOnlyDescription
If true, the form control will be readonly
Type
booleanisRequired
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
booleansize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"variant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"