saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Select

Select

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

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/select

Usage

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
  </SelectContent>
</Select>

Examples

With Label

Loading...
Select with label.

With Groups

Loading...
Grouped select options.

Sizes

Loading...
Size variants.

API Reference

PropTypeDefaultDescription
valuestring—The controlled value.
defaultValuestring—The default value.
onValueChange(value: string) => void—Event handler for value changes.

On This Page

  • Installation
  • Usage
  • Examples
  • With Label
  • With Groups
  • Sizes
  • API Reference