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.

Changing the size#

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

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

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.

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.

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.

Props#

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

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',
        },
      },
    },
  },
})