Claude-Code-Workflow/docs/components/ui/select.md

title, description, sidebar

title	description	sidebar
Select	Dropdown select component for choosing from a list of options	auto

Select

Overview

The Select component allows users to choose a single value from a list of options. Built on Radix UI Select Primitive, it provides accessibility and keyboard navigation out of the box.

Live Demo

:::demo select-variants Shows different select configurations including basic usage, with labels, and with separators :::

Components

The Select component includes the following sub-components:

Component	Purpose
Select	Root component that manages state
SelectTrigger	Button that opens the dropdown
SelectValue	Displays the selected value
SelectContent	Dropdown content container
SelectItem	Individual selectable option
SelectLabel	Non-interactive label for grouping
SelectGroup	Groups items together
SelectSeparator	Visual separator between items
SelectScrollUpButton	Scroll button for long lists
SelectScrollDownButton	Scroll button for long lists

Props

Select Root

Prop	Type	Default	Description
value	string	-	Currently selected value (controlled)
defaultValue	string	-	Default selected value
onValueChange	(value: string) => void	-	Callback when value changes
disabled	boolean	false	Whether the select is disabled
required	boolean	false	Whether a value is required
name	string	-	Form input name

SelectTrigger

Prop	Type	Default	Description
className	string	-	Custom CSS class name

SelectItem

Prop	Type	Default	Description
value	string	-	Item value
disabled	boolean	false	Whether the item is disabled
className	string	-	Custom CSS class name

Usage Examples

Basic Select

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

With Labels and Groups

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectLabel>Fruits</SelectLabel>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
    <SelectSeparator />
    <SelectLabel>Vegetables</SelectLabel>
    <SelectItem value="carrot">Carrot</SelectItem>
    <SelectItem value="broccoli">Broccoli</SelectItem>
  </SelectContent>
</Select>

Controlled Select

<script setup>
import { ref } from 'vue'

const selectedValue = ref('')
</script>

<template>
  <Select v-model="selectedValue">
    <SelectTrigger>
      <SelectValue placeholder="Select..." />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="a">Option A</SelectItem>
      <SelectItem value="b">Option B</SelectItem>
      <SelectItem value="c">Option C</SelectItem>
    </SelectContent>
  </Select>
</template>

Related Components

• Input
• Checkbox
• Button