Stepwise UI

Select

Single-option selector with an input-like trigger and a floating panel below it, matching Combobox. Optional label, controlled or uncontrolled.

Installation

npx stepwise-ui add select

Default

import { Select } from '@/components/stepwise/select'

const options = [
  { value: 'next',    label: 'Next.js' },
  { value: 'remix',   label: 'Remix' },
  { value: 'astro',   label: 'Astro' },
]

<Select options={options} placeholder="Choose a framework" />

With label

<Select
  label="Framework"
  options={options}
  placeholder="Select a framework"
/>
<Select
  label="Timezone"
  options={timezones}
  placeholder="Select timezone"
/>

Controlled

Pass value and onChange for controlled usage. Without them the component manages its own state.

Selected: next

const [value, setValue] = useState('next')

<Select
  label="Framework"
  options={options}
  value={value}
  onChange={setValue}
/>

Disabled

<Select options={options} placeholder="Disabled select" disabled />

Props

PropTypeDescription
options
SelectOption[]
Array of { value, label } objects.
value
string
Controlled selected value.
onChange
(value: string) => void
Called when selection changes.
placeholder
string
Text shown when nothing is selected.
label
string
Label rendered above the trigger.
disabled
boolean
Disables the trigger.