Select

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#

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

Usage#

Here's a basic usage of the Select component.

Editable Example

<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).

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

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

Editable Example

<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`

❤️ Contribute to this page

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