Lucent UI
← SelectMultiSelectDatePicker →
✦ LLM-ready

MultiSelect

atom

Dropdown that allows selecting multiple options rendered as Chips. Supports three sizes, label, helper/error text, max selection, and size-aware dropdown density.

"Add a MultiSelect from lucent-ui for selecting multiple tags or categories. Bind to a string[] state and show selected values as chips."

Usage

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

const [values, setValues] = useState<string[]>([]);

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

Installation

pnpm add lucent-ui

API Reference

MultiSelect props — * required

PropTypeDefaultDescription
options*MultiSelectOption[]—Array of { value, label, disabled? } options.
valuestring[]—Controlled array of selected values.
defaultValuestring[][]Uncontrolled initial selection.
onChange(values: string[]) => void—Called with updated selection array.
placeholderstring"Select..."Placeholder when nothing is selected.
size"sm" | "md" | "lg""md"Height, font size, and border radius matching Input.
labelstring—Label displayed above the multi-select.
helperTextstring—Hint or description below the control.
errorTextstring—Error message; triggers the error visual state.
disabledbooleanfalseDisables the entire control.
maxnumber—Maximum number of selectable items.
styleReact.CSSProperties—Inline styles for the wrapper.