Select

Displays a list of options for the user to pick from—triggered by a button.

Examples

Default

<script setup>
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@empathyds/vue'
</script>

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="blueberry">Blueberry</SelectItem>
      <SelectItem value="grapes">Grapes</SelectItem>
      <SelectItem value="pineapple">Pineapple</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Props

Select

Prop	Type	Default	Description
defaultValue	string	-	The default value of the select.
modelValue	string	-	The controlled value of the select.
defaultOpen	boolean	false	The open state of the select when it is initially rendered.
open	boolean	-	The controlled open state of the select.
dir	ltr | rtl	-	The reading direction of the select.
name	string	-	The name of the select.
autocomplete	string	-	The autocomplete attribute of the select.
disabled	boolean	false	Whether the select is disabled.
required	boolean	false	Whether the select is required.

Slots

Select

Slot	Description
default	The content of the select.

SelectTrigger

Slot	Description
default	The content of the trigger.

SelectContent

Slot	Description
default	The items of the select.

SelectItem

Slot	Description
default	The content of the item.