Lucent UI
← FilterSelectFilterMultiSelectFilterDateRange →
✦ LLM-ready

FilterMultiSelect

molecule

Filter-oriented multi-select with button-style trigger and popover dropdown. Supports xs–lg sizes, ghost variant, and label-less compact mode (no chevron). Ideal for toolbar and filter bar layouts.

"Add a FilterMultiSelect from lucent-ui for a toolbar filter. Use the ghost variant and xs size for compact layouts."

Usage

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

<FilterMultiSelect label="FilterMultiSelect" size="md" variant="secondary"
  label="Tags"
  options={[
    { value: "react", label: "React" },
    { value: "typescript", label: "TypeScript" },
    { value: "node", label: "Node.js" },
  ]} />

Installation

pnpm add lucent-ui

API Reference

FilterMultiSelect props — * required

PropTypeDefaultDescription
options*FilterMultiSelectOption[]—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.
label*string—Label shown on the trigger button.
size"xs" | "sm" | "md" | "lg""md"Trigger and dropdown density. xs is new for compact toolbar usage.
variant"secondary" | "outline" | "ghost""secondary"Trigger button style. Outline switches to secondary when items are selected. Ghost blends into toolbars.
iconReact.ReactNode—Icon rendered before the label in the trigger button.
disabledbooleanfalseDisables the trigger.
styleReact.CSSProperties—Inline styles for the wrapper.