select.mdx

import SEO from '../components/SEO'

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 { CSelect } from '@chakra-ui/vue'

Usage

Usage

Here's a basic usage of the Select component.

<template>
  <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>
    </c-select>
  </c-box>
</template>
<script>
export default {
  data() {
    return {
      burgerType: ''
    }
  }
}
</script>

Changing the size of the Select

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

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

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.

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

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.

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

Props

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

Name	Type	Default	Description
size	sm, md, lg	md	The visual size of the select element.
icon	string	chevron-down	The icon to use in place if the chevron-down
iconSize	BoxProps['size']	20px	The visual size 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

Slots

Name	Description
default	contains the <option> element as children of CSelect