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


import { CSelect } from '@chakra-ui/vue'


Here's a basic usage of the Select component.

Editable Example
  <c-box mb="3" w="300px">
    <c-select v-model="burgerType" placeholder="Select Burger">
      <option value="grilled">Grilled Backyard Burger</option>
      <option value="pub-style">The Pub-Style Burger</option>
      <option value="jucy-lucy">The Jucy Lucy</option>
export default {
  data() {
    return {
      burgerType: ''

Changing the size of the Select#

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

Editable Example
<c-stack :spacing="3">
  <c-select placeholder="large size" size="lg" />
  <c-select placeholder="default size" size="md" />
  <c-select placeholder="small size" size="sm" />

Changing the appearance of the Select#

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.

Editable Example
<c-stack :spacing="3">
  <c-select variant="outline" placeholder="Outline" />
  <c-select variant="filled" placeholder="Filled" />
  <c-select variant="flushed" placeholder="Flushed" />
  <c-select variant="unstyled" placeholder="Unstyled" />

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.

Editable Example
  placeholder="Woohoo! A new background color!"


The Select component composes PseudoBox so you can pass all PseudoBox props.

sizesm, md, lgmdThe visual size of the select element.
iconstringchevron-downThe icon to use in place if the chevron-down
iconSizeBoxProps['size']20pxThe visual size of the icon
variantoutline, unstyled, flushed, filledoutlineThe variant of the select style to use.
focusBorderColorstringThe border color when the select is focused.
errorBorderColorstringThe border color when isInvalid is set to true.
isDisabledbooleanfalseIf true, the select will be disabled. This sets aria-disabled=true and you can style this state by passing _disabled prop.
isInvalidbooleanfalseIf true, the select will indicate an error. This sets aria-invalid=true and you can style this state by passing _invalid prop.
isRequiredbooleanfalseIf true, the select element will be required.
isReadOnlybooleanfalseIf true, prevents the value of the select from being edited.
rootPropsBoxPropsThe 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


defaultcontains the <option> element as children of CSelect

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!