Select

Select component is a component that allows users pick a value from predefined options. Ideally, it should be used when there are more than 5 options, otherwise you might consider using a radio group instead.

Import

import { Select } from '@chakra-ui/react';

Usage

The Select components is used when there are more than 5 options for users to pick from, otherwise consider using a radio group instead.

Here is a basic usage of the Select component.

<Select placeholder='Select option'> <option value='option1'>Option 1</option> <option value='option2'>Option 2</option> <option value='option3'>Option 3</option> </Select>

<Select placeholder='Select option'>
  <option value='option1'>Option 1</option>
  <option value='option2'>Option 2</option>
  <option value='option3'>Option 3</option>
</Select>

Changing the size

The Select component comes in four sizes. The default is md.

• xs (24px)
• sm (32px)
• md (40px)
• lg (48px)

<Stack spacing={3}> <Select placeholder='extra small size' size='xs' /> <Select placeholder='small size' size='sm' /> <Select placeholder='medium size' size='md' /> <Select placeholder='large size' size='lg' /> </Stack>

<Stack spacing={3}>
  <Select placeholder='extra small size' size='xs' />
  <Select placeholder='small size' size='sm' />
  <Select placeholder='medium size' size='md' />
  <Select placeholder='large size' size='lg' />
</Stack>

Changing the appearance

Just like the input component, Select comes in 4 variants, outline, unstyled , flushed , and filled. Pass the variant prop and set it to either of these values.

<Stack spacing={3}> <Select variant='outline' placeholder='Outline' /> <Select variant='filled' placeholder='Filled' /> <Select variant='flushed' placeholder='Flushed' /> <Select variant='unstyled' placeholder='Unstyled' /> </Stack>

<Stack spacing={3}>
  <Select variant='outline' placeholder='Outline' />
  <Select variant='filled' placeholder='Filled' />
  <Select variant='flushed' placeholder='Flushed' />
  <Select variant='unstyled' placeholder='Unstyled' />
</Stack>

Changing the icon

As with most Chakra components, you can change the arrow icon used in the select. Simply pass the icon prop.

In case the custom icon size doesn't look right, you can pass the iconSize prop to change it.

<Select icon={<MdArrowDropDown />} placeholder='Woohoo! A new icon' />

<Select icon={<MdArrowDropDown />} placeholder='Woohoo! A new icon' />

Overriding the styles

Even though the select comes with predefined styles, you can override pretty much any property. Here we'll override the background color.

<Select bg='tomato' borderColor='tomato' color='white' placeholder='Woohoo! A new background color!' />

<Select
  bg='tomato'
  borderColor='tomato'
  color='white'
  placeholder='Woohoo! A new background color!'
/>

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"