Select

The Select component provides a dropdown list that allows users to choose options from a predefined set. It supports both single selection (the default behavior) and multiple selection. It’s a standard form element for collecting user input from a list of choices.

Installation

Add the Select component to your project using the OrbitUI CLI:

npx orbitkit@latest add select

Usage

Import the Select and Option components. Place the Option components inside the Select component. Use standard HTML attributes on the Select component for functionality (like name, id, value, multiple) and on the Option components for their values and labels.

For single selection (default):

Preview

Dark White System

Code

index.astro

---
import { Select, Option } from "@/components/ui/select";
---

<Select id="theme-select" name="theme">
  <Option value="dark">Dark</Option>
  <Option value="white">White</Option>
  <Option value="system">System</Option>
</Select>

For multiple selection, add the multiple attribute to the Select component:

Preview

Red Blue Green

Code

index.astro

---
import { Select, Option } from "@/components/ui/select";
---

<Select id="colors-select" name="colors" multiple>
  <Option value="red">Red</Option>
  <Option value="blue">Blue</Option>
  <Option value="green">Green</Option>
</Select>

Props

Select

The Select component accepts all standard HTML attributes for a <select> element, plus the following props based on the selectVariants defined using class-variance-authority:

Prop	Type	Default
variant	default	default
disabled	boolean	false

Option

The Option component represents an individual selectable item within a Select dropdown. This component accepts all standard HTML attributes for an <option> element.