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"Props#
The Input component composes Box so you can
pass all Box props, and React.InputHTMLAttributes.
colorScheme
colorSchemeDescription
Color Schemes for Input are not implemented in the default theme. You can extend the theme to implement them.
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"The Input component is a multipart component. Read more about how to style multipart components in the style system docs.
You can see the default theme source here to find out the parts and how to update them.