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/core"

Usage#

Here's 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>

Changing the size of the Select#

There are three sizes of select : large (48px), default (40px) and small (32px).

<Stack spacing={3}>
  <Select placeholder="large size" size="lg" />
  <Select placeholder="default size" size="md" />
  <Select placeholder="small size" size="sm" />
</Stack>

Changing the appearance of the Select#

Just like the input component, select comes in 3 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>

Changing the icon in the Select#

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" />

Overriding the styles of the Select#

Even though the select comes with predefined styles, you can override pretty much any property. Here's we'll override the 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: