Lucent UI
← SearchInputSelectMultiSelect →
✦ LLM-ready

Select

atom

Native dropdown for choosing from a fixed list of options. Supports label, placeholder, error state, and three sizes.

"Add a Select from lucent-ui with a label, placeholder, and a list of options. Show an error state if nothing is selected."

Usage

React / JSX
import { Select } from 'lucent-ui'

<Select label="Select" placeholder="Select" size="md"
  options={[
    { value: "react", label: "React" },
    { value: "vue", label: "Vue" },
    { value: "svelte", label: "Svelte" },
    { value: "angular", label: "Angular" },
  ]} />

Installation

pnpm add lucent-ui

API Reference

Select props — * required

PropTypeDefaultDescription
labelstring—Label above the select.
placeholderstring—Default empty option shown when no value is selected.
options*Array<{ value: string; label: string }>—The list of selectable options.
valuestring—Controlled value.
defaultValuestring—Uncontrolled initial selection.
size"sm" | "md" | "lg""md"Height and font size.
errorTextstring—Error message; triggers the error visual state.
disabledbooleanfalsePrevents interaction.
onChange(e: React.ChangeEvent<HTMLSelectElement>) => void—Change handler.