Anatomy

<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="value">
      Label
    </Select.Item>
  </Select.Content>
</Select.Root>

Usage

import { Select } from '@ivaldi/ui'

<Select.Root>
  <Select.Trigger>
    <Select.Value placeholder="Select an option" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="1">Option 1</Select.Item>
    <Select.Item value="2">Option 2</Select.Item>
    <Select.Item value="3">Option 3</Select.Item>
  </Select.Content>
</Select.Root>

Select.Composed Props

A complete select component that combines all select primitives into a cohesive component.

Select.Root Props

Select.Button Props

A button component specifically designed for use as a select trigger.

Select.Content Props

A component that renders the content of a select dropdown.

Select.Group Props

Select.Item Props

A component that renders a selectable item within a select dropdown.

Select.Label Props

A component that renders a label within a select dropdown.

Select.Separator Props

A component that renders a separator line between select items.

Select.Trigger Props

Select.Value Props