Select
StableDisplays a list of options for the user to pick from, triggered by a button.
Examples
Basic Usage
tsx
<Select
label="Region"
placeholder="Select a region"
options={[
{ value: 'us-east', label: 'US East' },
{ value: 'eu-central', label: 'EU Central' }
]}
/>Grouped Options
tsx
<Select
label="Server Location"
options={[
{ label: 'North America', options: [...] },
{ label: 'Europe', options: [...] }
]}
/>Neon Variant
tsx
<Select variant="neon" label="Model" options={...} />States
tsx
<div className="flex flex-col gap-4">
<Select error="Invalid selection." options={...} />
<Select success options={...} />
</div>API Reference
| Property | Description | Type | Default |
|---|---|---|---|
| options | Array of SelectOption or SelectOptionGroup. | (SelectOption | SelectOptionGroup)[] | - |
| variant | Visual style. | "default" | "neon" | "ghost" | - |
| label | Text rendered above the select. | string | - |
| error | Error state and message. | string | boolean | - |
| success | Success outline state. | boolean | - |