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 { Select } from "@chakra-ui/react"


Here's a basic usage of the Select component.

Editable Example

Changing the size of the Select#

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

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

Changing the appearance of the Select#

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.

Editable Example

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.

Editable Example

Overriding the styles of the Select#

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

Editable Example


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

colorScheme"blue" | "cyan" | "gray" | "green" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "whiteAlpha" | "blackAlpha" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"Color Schemes for Select are not implemented in the default theme. You can extend the theme to implement them.-
errorBorderColorstringThe border color when the select is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"-
focusBorderColorstringThe border color when the select is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"-
iconReact.ReactElementThe icon element to use in the select-
iconColorstringThe color of the icon-
iconSizestringThe size (width and height) of the icon-
isFullWidthbooleanIf `true`, the select element will span the full width of its parent @deprecated This component defaults to 100% width, please use the props `maxWidth` or `width` to configure-
isInvalidbooleanIf `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`-
isReadOnlybooleanIf `true`, the form control will be readonly-
isRequiredbooleanIf `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`-
rootPropsRootPropsProps to forward to the root `div` element-
size"sm" | "md" | "lg" | "xs""md"
variant"outline" | "unstyled" | "filled" | "flushed""outline"