Lucent UI
← FilterSearchFilterSelectFilterMultiSelect →
✦ LLM-ready

FilterSelect

molecule

Single-select filter button that opens a Menu popover. The trigger shows the selected label or falls back to the label prop. Outline variant auto-switches to secondary when a value is selected.

"Add a FilterSelect from lucent-ui for a single-select filter in a toolbar. It opens a Menu popover with selectable options."

Usage

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

<FilterSelect label="FilterSelect" variant="secondary" size="md"
  label="Status"
  options={[
    { value: "active", label: "Active" },
    { value: "inactive", label: "Inactive" },
    { value: "pending", label: "Pending" },
  ]} />

Installation

pnpm add lucent-ui

API Reference

FilterSelect props — * required

PropTypeDefaultDescription
label*string—Label shown on the trigger when no value is selected.
options*FilterSelectOption[]—Array of { value, label, disabled? } options.
valuestring—Controlled selected value.
defaultValuestring—Initial value for uncontrolled usage.
onChange(value: string | undefined) => void—Called with the selected value, or undefined when cleared.
variant"secondary" | "outline""secondary"Trigger style. Outline auto-switches to secondary when a value is selected.
size"sm" | "md" | "lg""md"Trigger and dropdown size.
iconReact.ReactNode—Icon rendered before the label in the trigger.
disabledbooleanfalseDisables the trigger.
styleReact.CSSProperties—Inline styles for the wrapper.