select

Select

Lets the user pick one option from a list that opens below the trigger at its width, joining a Field.

States: Default, Focus, Disabled, Invalid

Parts

Part	File	Does
Select	Select.vue	Groups all parts of the select.
SelectContent	SelectContent.vue	Holds the options of the select while it is open.
SelectGroup	SelectGroup.vue	Groups related options of the select.
SelectItem	SelectItem.vue	Offers one option the user can pick in the select.
SelectItemText	SelectItemText.vue	Holds the text of an option, which the select shows once chosen.
SelectLabel	SelectLabel.vue	Labels a group of options in the select.
SelectScrollDownButton	SelectScrollDownButton.vue	Scrolls the options down when the list is longer than the view.
SelectScrollUpButton	SelectScrollUpButton.vue	Scrolls the options up when the list is longer than the view.
SelectSeparator	SelectSeparator.vue	Separates groups of options in the select.
SelectTrigger	SelectTrigger.vue	Opens and closes the list of options in the select.
SelectValue	SelectValue.vue	Shows the chosen option, or a placeholder when nothing is chosen.

Anatomy

<Select>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem>
      <SelectItemText />
    </SelectItem>
  </SelectContent>
</Select>

Styling

Part	Recipe
SelectContent	select-content
SelectGroup	select-group
SelectItem	select-item
SelectItem	select-item-indicator
SelectLabel	select-label
SelectScrollDownButton	select-scroll-button
SelectScrollUpButton	select-scroll-button
SelectSeparator	select-separator
SelectTrigger	select-trigger
SelectTrigger	select-chevron
SelectValue	select-value
SelectValue	select-value-placeholder

Install

Writes 12 files into components/ui/select/. For agents, npx @frontic/ui docs select prints this reference as markdown; the MCP server serves the same.

npm packages: @lucide/vue; @vueuse/core; class-variance-authority; reka-ui

API reference

Select Select.vue

Groups all parts of the select.

Prop	Type	Default
open	boolean	—

defaultOpen	boolean	false

defaultValue	AcceptableValue \| AcceptableValue[]	—

modelValue	AcceptableValue \| AcceptableValue[]	—

nullableValue	string	''

by	string \| ((a: AcceptableValue, b: AcceptableValue) => boolean)	—

dir	Direction	—

multiple	boolean	false

autocomplete	string	—

disabled	boolean	false

name	string	—

required	boolean	false

Event	Payload
update:modelValue	value: AcceptableValue

update:open	value: boolean

Slot	Slot props
default	{ modelValue: AcceptableValue \| AcceptableValue[] \| undefined; open: boolean; }

Parts

Anatomy

Styling

Install

API reference

Select Select.vue

SelectContent SelectContent.vue

SelectGroup SelectGroup.vue

SelectItem SelectItem.vue

SelectItemText SelectItemText.vue

SelectLabel SelectLabel.vue

SelectScrollDownButton SelectScrollDownButton.vue

SelectScrollUpButton SelectScrollUpButton.vue

SelectSeparator SelectSeparator.vue

SelectTrigger SelectTrigger.vue

SelectValue SelectValue.vue