Color Schemes for Select are not implemented in the default theme. You can extend the theme to implement them.
Select
Select component is a component that allows users pick a value from predefined options.
Props#
The Select component composes Box so you can pass
all Box props, and native Select props in addition to these:
colorScheme
colorSchemeDescription
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the select is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the select is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringicon
iconDescription
The icon element to use in the select
Type
React.ReactElementiconColor
iconColorDescription
The color of the icon
Type
stringiconSize
iconSizeDescription
The size (width and height) of the icon
Type
stringisDisabled
isDisabledType
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
booleanrootProps
rootPropsDescription
Props to forward to the root div element
Type
RootPropssize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"variant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"Props#
The Select component composes Box so you can pass
all Box props, and native Select props in addition to these:
colorScheme
colorSchemeDescription
Color Schemes for Select are not implemented in the default theme. You can extend the theme to implement them.
Type
stringerrorBorderColor
errorBorderColorDescription
The border color when the select is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the select is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
Type
stringicon
iconDescription
The icon element to use in the select
Type
React.ReactElementiconColor
iconColorDescription
The color of the icon
Type
stringiconSize
iconSizeDescription
The size (width and height) of the icon
Type
stringisDisabled
isDisabledType
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
booleanrootProps
rootPropsDescription
Props to forward to the root div element
Type
RootPropssize
sizeType
"lg" | "md" | "sm" | "xs"Default
"md"variant
variantType
"outline" | "filled" | "flushed" | "unstyled"Default
"outline"The Select component is a multipart component. Read more about how to style multipart components in the style system docs.
This component has two parts: field and icon. You can find
more information in the source for the styles
here.
Example#
The following theme would change the color of the field to red.500, and change the fontSize of icon to 2xl.
import { extendTheme } from '@chakra-ui/react'const theme = extendTheme({components: {Select: {baseStyle: {field: {color: 'red.500',},icon: {fontSize: '2xl',},},},},})