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

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>

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

Editable Example

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>

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

Editable Example

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>

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

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.

🚨 This feature works in v0.5.1. Kindly upgrade if you need it

// This is an icon from "react-icons"
<Select icon={MdArrowDropDown} iconSize={8} placeholder="Woohoo! A new icon" />

// This is an icon from "react-icons"
<Select icon={MdArrowDropDown} iconSize={8} placeholder="Woohoo! A new icon" />

Editable Example

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
  backgroundColor="tomato"
  borderColor="tomato"
  color="white"
  placeholder="Woohoo! A new background color!"
/>

<Select
  backgroundColor="tomato"
  borderColor="tomato"
  color="white"
  placeholder="Woohoo! A new background color!"
/>

Editable Example

Props#

The Select component composes PseudoBox so you can pass all PseudoBox props, and React.SelectHTMLAttributes.

Name	Type	Default	Description
`size`	`sm`, `md`, `lg`	`md`	The visual size of the `select` element.
`icon`	`React.ElementType`, `string`	`chevron-down`	The icon to use in place if the `chevron-down`
`iconSize`	`BoxProps['size']`	`20px`	The visual size of the icon
`iconColor`	`BoxProps['color']`		The color of the icon
`variant`	`outline`, `unstyled`, `flushed`, `filled`	`outline`	The variant of the select style to use.
`focusBorderColor`	`string`		The border color when the select is focused.
`errorBorderColor`	`string`		The border color when `isInvalid` is set to `true`.
`isDisabled`	`boolean`	`false`	If `true`, the select will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.
`isInvalid`	`boolean`	`false`	If `true`, the `select` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop.
`isRequired`	`boolean`	`false`	If `true`, the select element will be required.
`isReadOnly`	`boolean`	`false`	If `true`, prevents the value of the select from being edited.
`rootProps`	`BoxProps`		The props to pass to the wrapper of the select. The select is wrapped in a `Box` to help align the icon, if you want to pass some props to that wrapper, use this prop

Proudly made in 🇳🇬

Released under the MIT License.

Select

.css-12m0k8p{pointer-events:auto;}Import.css-18hqai{color:#319795;font-weight:400;outline:none;opacity:0;margin-left:0.375rem;}.css-18hqai:focus{opacity:1;box-shadow:0 0 0 3px rgba(66,153,225,0.6);}#

Usage#

Changing the size of the Select#

Changing the appearance of the Select#

Changing the icon in the Select#

Overriding the styles of the Select#

Props#

Import#