Listbox

Pass options as { value, label, disabled? }. The machine manages roving focus, typeahead, and selection.

import { Listbox } from '@manti-ui/react';

const fillings = [
  { value: 'lamb', label: 'Lamb & onion' },
  { value: 'beef', label: 'Beef & herb' },
  { value: 'pumpkin', label: 'Pumpkin' },
  { value: 'potato', label: 'Potato', disabled: true },
  { value: 'spinach', label: 'Spinach & cheese' },
];

export default function ListboxBasic() {
  return (
    <Listbox
      items={fillings}
      label="Filling"
      variant="primary"
      defaultValue={['beef']}
    />
  );
}

Sizes

size sets the row rhythm: type, padding, and icon size. It is the same scale Select, Combobox, and Menu use, so a list next to a sm control reads at the same size.

Small

Medium

Large

Multiple selection

Set selectionMode="multiple" and use array values.

Fillings

API

Prop	Type	Default	Description
`items`	`ListboxItem[]`	—	The options. Each item is `{ value, label, disabled? }`.
`label`	`ReactNode`	—	Optional label rendered above the list.
`variant`	`MantiVariant`	`'primary'`	Variant applied to the selected item.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Row rhythm: type, padding, and icon size.
`selectionMode`	`'single' \| 'multiple'`	`'single'`	Whether one or several items can be selected.
`value`	`string[]`	—	Controlled selected values.
`defaultValue`	`string[]`	—	Initial selected values for uncontrolled usage.
`onValueChange`	`(value: string[]) => void`	—	Called whenever the selection changes.
`disabled`	`boolean`	—	Disable the whole list.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="listbox"][data-part="root"]`	The list wrapper carrying scope, variant, and state.
`label`	`[data-scope="listbox"][data-part="label"]`	Optional label above the list.
`content`	`[data-scope="listbox"][data-part="content"]`	The scrollable `<ul>` holding the options.
`item`	`[data-scope="listbox"][data-part="item"]`	A single selectable option.
`item-indicator`	`[data-scope="listbox"][data-part="item-indicator"]`	The checkmark shown on selected items.

Tokens

Token	Controls
`--manti-listbox-min-width`	min width
`--manti-listbox-max-height`	max height
`--manti-listbox-padding`	padding
`--manti-listbox-gap`	gap
`--manti-listbox-item-padding-y`	item padding y
`--manti-listbox-item-padding-x`	item padding x
`--manti-listbox-item-gap`	item gap
`--manti-listbox-item-radius`	item radius
`--manti-listbox-item-font-size`	item font size

Last updated 13 September 2026