The visual color appearance of the component
Select
Select component is a component that allows users pick a value from predefined options.
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/theme-utils'const theme = extendTheme({components: {Select: {baseStyle: {field: {color: 'red.500',},icon: {fontSize: '2xl',},},},},})
Props#
The Select component composes Box so you can pass
all Box props, and native Select props in addition to these:
colorScheme
colorSchemeDescription
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"errorBorderColor
errorBorderColorDescription
The border color when the select is invalid. Use color keys in `theme.colors`
Type
stringfocusBorderColor
focusBorderColorDescription
The border color when the select is focused. Use color keys in `theme.colors`
Type
stringicon
iconDescription
The icon element to use in the select
Type
ReactElement<any, string | JSXElementConstructor<any>>iconColor
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
sizeDescription
The size of the Select
Type
"lg" | "md" | "sm" | "xs"Default
mdvariant
variantDescription
The variant of the Select
Type
"outline" | "filled" | "flushed" | "unstyled"Default
outlineThe 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/theme-utils'const theme = extendTheme({components: {Select: {baseStyle: {field: {color: 'red.500',},icon: {fontSize: '2xl',},},},},})