Select

Default

Usage

import { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton } from '@tryvienna/ui'

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
    <SelectItem value="grape">Grape</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectContent>
</Select>

Examples

Default

Default

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Pick a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="cherry">Cherry</SelectItem>
    <SelectItem value="grape">Grape</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
  </SelectContent>
</Select>

With Groups

With Groups

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Select a food" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
      <SelectItem value="cherry">Cherry</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="carrot">Carrot</SelectItem>
      <SelectItem value="broccoli">Broccoli</SelectItem>
      <SelectItem value="spinach">Spinach</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>Grains</SelectLabel>
      <SelectItem value="rice">Rice</SelectItem>
      <SelectItem value="wheat">Wheat</SelectItem>
      <SelectItem value="oats">Oats</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Small Size

Small Size

<Select>
  <SelectTrigger size="sm" className="w-48">
    <SelectValue placeholder="Small select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="sm">Small</SelectItem>
    <SelectItem value="md">Medium</SelectItem>
    <SelectItem value="lg">Large</SelectItem>
  </SelectContent>
</Select>

Popper

Popper

<Select>
  <SelectTrigger className="w-48">
    <SelectValue placeholder="Popper position" />
  </SelectTrigger>
  <SelectContent position="popper">
    <SelectItem value="top">Top</SelectItem>
    <SelectItem value="right">Right</SelectItem>
    <SelectItem value="bottom">Bottom</SelectItem>
    <SelectItem value="left">Left</SelectItem>
  </SelectContent>
</Select>

API Reference

Select

Also accepts all props from SelectPrimitive.Root.

SelectGroup

Also accepts all props from SelectPrimitive.Group.

SelectValue

Also accepts all props from SelectPrimitive.Value.

SelectTrigger

Prop	Type	Default	Description
size	"default" | "sm"	default

Also accepts all props from SelectPrimitive.Trigger.

SelectContent

Prop	Type	Default	Description
position	"item-aligned" | "popper"	item-aligned
align	"center" | "start" | "end"	center

Also accepts all props from SelectPrimitive.Content.

SelectLabel

Also accepts all props from SelectPrimitive.Label.

SelectItem

Also accepts all props from SelectPrimitive.Item.

SelectSeparator

Also accepts all props from SelectPrimitive.Separator.

SelectScrollUpButton

Also accepts all props from SelectPrimitive.ScrollUpButton.

SelectScrollDownButton

Also accepts all props from SelectPrimitive.ScrollDownButton.

Data Attributes

Component	data-slot
Select	"select"
SelectGroup	"select-group"
SelectValue	"select-value"
SelectTrigger	"select-trigger"
SelectContent	"select-content"
SelectLabel	"select-label"
SelectItem	"select-item"
SelectSeparator	"select-separator"
SelectScrollUpButton	"select-scroll-up-button"
SelectScrollDownButton	"select-scroll-down-button"