Select

<Select defaultValue="apple">  <SelectTrigger className="w-[200px]">    <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>

Usage

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@reva/ui";

SelectTrigger exposes three surface-level variants — default (matches the Input surface), secondary (filled muted chrome matching Button variant="secondary"), and ghost (transparent, fg-muted text + caret, with no background until hover or open). default and secondary are typically full-width or given a min-w-*; ghost is content-width by default (it inherits the trigger's base w-fit). Leading icons use the shared data-icon="inline-start" convention; the chevron is rendered by the trigger and should not be provided manually.

Composition

Use the following composition to build a Select:

Select
└── SelectTrigger
│   └── SelectValue
└── SelectContent
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        ├── SelectSeparator
        └── SelectItem

Examples

Variants

Three surface treatments — default, secondary, and ghost — from most to least chrome. default and secondary carry a min-w-*; ghost hugs its content.

<HStack gap={3} align="center">  <Select defaultValue="apple">    <SelectTrigger className="min-w-[160px]">      <SelectValue />    </SelectTrigger>    <SelectContent>      <SelectItem value="apple">Apple</SelectItem>      <SelectItem value="banana">Banana</SelectItem>    </SelectContent>  </Select>  <Select defaultValue="apple">    <SelectTrigger variant="secondary" className="min-w-[160px]">      <SelectValue />    </SelectTrigger>    <SelectContent>      <SelectItem value="apple">Apple</SelectItem>      <SelectItem value="banana">Banana</SelectItem>    </SelectContent>  </Select>  <Select defaultValue="apple">    <SelectTrigger variant="ghost">      <SelectValue />    </SelectTrigger>    <SelectContent>      <SelectItem value="apple">Apple</SelectItem>      <SelectItem value="banana">Banana</SelectItem>    </SelectContent>  </Select></HStack>

Sizes

Two heights — size="sm" (32px) and the default (40px) — available on every variant. Set size on the Select root; dropdown items match the trigger text-size. Each row below pairs the two sizes for one variant (default, secondary, ghost).

<VStack gap={4} align="start">  <HStack gap={3} align="center">    <Select size="sm" defaultValue="apple">      <SelectTrigger className="min-w-[150px]">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="banana">Banana</SelectItem>      </SelectContent>    </Select>    <Select defaultValue="apple">      <SelectTrigger className="min-w-[150px]">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="banana">Banana</SelectItem>      </SelectContent>    </Select>  </HStack>  <HStack gap={3} align="center">    <Select size="sm" defaultValue="apple">      <SelectTrigger variant="secondary" className="min-w-[150px]">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="banana">Banana</SelectItem>      </SelectContent>    </Select>    <Select defaultValue="apple">      <SelectTrigger variant="secondary" className="min-w-[150px]">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="banana">Banana</SelectItem>      </SelectContent>    </Select>  </HStack>  <HStack gap={3} align="center">    <Select size="sm" defaultValue="apple">      <SelectTrigger variant="ghost">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="banana">Banana</SelectItem>      </SelectContent>    </Select>    <Select defaultValue="apple">      <SelectTrigger variant="ghost">        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="apple">Apple</SelectItem>        <SelectItem value="banana">Banana</SelectItem>      </SelectContent>    </Select>  </HStack></VStack>

With Icon

Add a leading icon with data-icon="inline-start" — the trigger applies the correct padding and icon sizing automatically, across every variant and size. Each row pairs the two sizes for one variant (default, secondary, ghost).

<VStack gap={4} align="start">  <HStack gap={3} align="center">    <Select size="sm" defaultValue="anna">      <SelectTrigger className="min-w-[200px]">        <User data-icon="inline-start" />        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="anna">Anna Whitfield</SelectItem>        <SelectItem value="james">James Hollis</SelectItem>      </SelectContent>    </Select>    <Select defaultValue="anna">      <SelectTrigger className="min-w-[200px]">        <User data-icon="inline-start" />        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="anna">Anna Whitfield</SelectItem>        <SelectItem value="james">James Hollis</SelectItem>      </SelectContent>    </Select>  </HStack>  <HStack gap={3} align="center">    <Select size="sm" defaultValue="anna">      <SelectTrigger variant="secondary" className="min-w-[200px]">        <User data-icon="inline-start" />        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="anna">Anna Whitfield</SelectItem>        <SelectItem value="james">James Hollis</SelectItem>      </SelectContent>    </Select>    <Select defaultValue="anna">      <SelectTrigger variant="secondary" className="min-w-[200px]">        <User data-icon="inline-start" />        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="anna">Anna Whitfield</SelectItem>        <SelectItem value="james">James Hollis</SelectItem>      </SelectContent>    </Select>  </HStack>  <HStack gap={3} align="center">    <Select size="sm" defaultValue="anna">      <SelectTrigger variant="ghost">        <User data-icon="inline-start" />        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="anna">Anna Whitfield</SelectItem>        <SelectItem value="james">James Hollis</SelectItem>      </SelectContent>    </Select>    <Select defaultValue="anna">      <SelectTrigger variant="ghost">        <User data-icon="inline-start" />        <SelectValue />      </SelectTrigger>      <SelectContent>        <SelectItem value="anna">Anna Whitfield</SelectItem>        <SelectItem value="james">James Hollis</SelectItem>      </SelectContent>    </Select>  </HStack></VStack>

With label

Pair with Field for an accessible label + control pairing.

<Field className="w-full max-w-sm">  <FieldLabel htmlFor="fruit">Favourite fruit</FieldLabel>  <Select>    <SelectTrigger id="fruit" className="w-full">      <SelectValue placeholder="Select a fruit" />    </SelectTrigger>    <SelectContent>      <SelectItem value="apple">Apple</SelectItem>      <SelectItem value="banana">Banana</SelectItem>      <SelectItem value="blueberry">Blueberry</SelectItem>    </SelectContent>  </Select></Field>

Props

Select (root)

Radix Select.Root. Common props:

Prop	Type	Default	Description
`value`	`string`	—	Controlled selected value.
`defaultValue`	`string`	—	Initial value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Controlled change handler.
`disabled`	`boolean`	`false`	Disables the whole control.
`name`	`string`	—	Form field name.
`required`	`boolean`	`false`	Form validation.

SelectTrigger

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "ghost"`	`"default"`	Surface treatment. `ghost` = transparent, `fg-muted`, content-width.
`size`	`"sm" \| "default"`	`"default"`	Control height (32px / 40px).

SelectItem

Prop	Type	Default	Description
`value`	`string`	—	Required. The value written back to `Select` on select.
`disabled`	`boolean`	`false`	Prevents selection.

Select

On this page