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
stringerrorBorderColor
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
stringerrorBorderColor
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.
This component has three parts: field, addon, and element. You can find
more information in the source for the styles
here.
Example#
The following theme would add a background with the value red.200 to the
field, and remove the border of the addon.
import { extendTheme } from '@chakra-ui/react'const theme = extendTheme({components: {Input: {baseStyle: {field: {bg: 'red.200',},addon: {border: 'none',},},},},})