Select

Select component is a component that allows users pick a value from predefined options.

    SourceTheme source@chakra-ui/select

Props#

The Select component composes Box so you can pass all Box props, and native Select props in addition to these:

colorScheme

Description

Color Schemes for Select are not implemented in the default theme. You can extend the theme to implement them.

Type
(string & {})

errorBorderColor

Description

The border color when the select is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"

Type
string

focusBorderColor

Description

The border color when the select is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"

Type
string

icon

Description

The icon element to use in the select

Type
React.ReactElement

iconColor

Description

The color of the icon

Type
string

iconSize

Description

The size (width and height) of the icon

Type
string

isDisabled

Type
boolean

isInvalid

Description

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
boolean

isReadOnly

Description

If true, the form control will be readonly

Type
boolean

isRequired

Description

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
boolean

rootProps

Description

Props to forward to the root div element

Type
RootProps

size

Type
"lg" | "md" | "sm" | "xs"
Default
"md"

variant

Type
"outline" | "filled" | "flushed" | "unstyled"
Default
"outline"
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel