Fluxo UIFluxo UIv0.4.1

ListBox

A scrollable list component for single or multi-item selection. Supports search, grouping, disabled items, and custom item templates.

Single Selection

Basic single select

Click an item to select it.

React
Meta's UI library
Vue
Progressive framework
Angular
Google's framework
Svelte
Compiler-based UI
Solid
Fine-grained reactivity
Qwik
Resumable framework
const [value, setValue] = useState<string>();

<ListBox
  options={frameworkOptions}
  value={value}
  onChange={(v) => setValue(v as string)}
/>

Multiple Selection

Multi-select with select-all

Select multiple items. Shift-click or use the Select All checkbox.

Admin
Full access
Editor
Can edit content
Viewer
Read only
Moderator
Can moderate
Analyst
Can view reports
const [values, setValues] = useState<string[]>([]);

<ListBox
  options={options}
  value={values}
  onChange={(v) => setValues(v as string[])}
  multiple
  selectAll
  clearable
/>

Searchable

With search filter

Type to filter the list in real time.

React
Meta's UI library
Vue
Progressive framework
Angular
Google's framework
Svelte
Compiler-based UI
Solid
Fine-grained reactivity
Qwik
Resumable framework
<ListBox
  options={options}
  value={value}
  onChange={setValue}
  searchable
  searchPlaceholder="Search frameworks..."
/>

Grouped Options

Group by category

Items grouped by their category with sticky group headers.

JavaScript
TypeScript
CSS
Python
Go
Rust
PostgreSQL
MongoDB
<ListBox
  options={options}
  value={values}
  onChange={(v) => setValues(v as string[])}
  multiple
  grouped
  groupBy={(opt) => opt.metadata?.category ?? 'Other'}
  maxHeight={280}
/>

Disabled State

Fully disabled

The entire list is non-interactive when disabled is true.

React
Meta's UI library
Vue
Progressive framework
Angular
Google's framework
Svelte
Compiler-based UI
Solid
Fine-grained reactivity
Qwik
Resumable framework
<ListBox options={options} value={value} disabled />

API Reference

optionsreq
ListBoxOption[]

Array of options to display.

value
T | T[]

Currently selected value or array of values (for multiple selection).

onChange
(value: T | T[]) => void

Called when selection changes.

multiple
boolean"false"

Allow selecting multiple items.

searchable
boolean"false"

Show a search input above the list.

searchPlaceholder
string

Placeholder text for the search input.

grouped
boolean"false"

Group items using the groupBy function.

groupBy
(option: ListBoxOption) => string

Returns the group name for each option.

selectAll
boolean"false"

Show a Select All checkbox (requires multiple).

clearable
boolean"false"

Show a Clear All button.

disabled
boolean"false"

Disable all interactions.

emptyMessage
string

Message shown when the option list is empty.

maxHeight
string | number

Max height of the scrollable list.

itemTemplate
(option: ListBoxOption) => ReactNode

Custom renderer for each option item.

compareFn
(a: T, b: T) => boolean

Custom equality comparator for option values. Defaults to deep-equal (JSON-stringify based) for objects.

ariaLabel
string

Accessible label for the listbox.

ariaLabelledBy
string

ID of the element that labels the listbox.

Features

Single & Multi Select

Supports both single value and multi-value selection modes

Search Filter

Built-in search input filters options in real time without extra code

Grouping

Group options by any property with sticky group headers

Select All & Clear

Optional Select All checkbox and Clear button for bulk operations

Disabled Items

Individual options can be marked as disabled while the list remains interactive

Custom Templates

itemTemplate prop renders any React node for fully custom option display

Accessibility

Keyboard navigation, ARIA roles, and focus management built in

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config