Select

Pass options as { value, label, disabled? }. Values are string arrays for both single and multiple selection.

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

const regions = [
  { value: 'kayseri', label: 'Kayseri' },
  { value: 'bukhara', label: 'Bukhara' },
  { value: 'kashgar', label: 'Kashgar' },
  { value: 'yerevan', label: 'Yerevan' },
  { value: 'sarajevo', label: 'Sarajevo' },
];

export default function SelectBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*5)]">
      <Select items={regions} label="Region" placeholder="Pick a region…" />
    </div>
  );
}

Appearance

Use variant="fill" for a neutral filled trigger. size uses the shared size scale: the portalled listbox follows the trigger, so a sm Select opens sm rows.

Default

Filled

Small

Medium

Large

Multiple selection

Regions

API

Prop	Type	Default	Description
`items`	`SelectItem[]`	—	The options. Each is `{ value, label, disabled? }`.
`label`	`ReactNode`	—	Optional field label.
`placeholder`	`string`	`'Select…'`	Text shown when nothing is selected.
`variant`	`'default' \| 'fill'`	`'default'`	Visual treatment for the trigger.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size.
`multiple`	`boolean`	—	Allow selecting more than one option.
`value`	`string[]`	—	Controlled selected values.
`defaultValue`	`string[]`	—	Initial selected values for uncontrolled usage.
`onValueChange`	`(value: string[]) => void`	—	Called whenever the selection changes.
`placement`	`Placement`	`'bottom-start'`	Placement of the listbox relative to the trigger.
`disabled`	`boolean`	—	Disable the control.
`invalid`	`boolean`	—	Mark the field as invalid.
`required`	`boolean`	—	Mark the field as required.
`name`	`string`	—	Form field name.
`aria-label`	`string`	—	Accessible name when no visible label is provided.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="select"][data-part="root"]`	The field wrapper.
`label`	`[data-scope="select"][data-part="label"]`	The optional field label.
`trigger`	`[data-scope="select"][data-part="trigger"]`	The button that opens the listbox.
`value-text`	`[data-scope="select"][data-part="value-text"]`	The selected value (or placeholder) text.
`indicator`	`[data-scope="select"][data-part="indicator"]`	The chevron on the trigger.
`positioner`	`[data-scope="select"][data-part="positioner"]`	The portalled wrapper positioning the listbox.
`content`	`[data-scope="select"][data-part="content"]`	The translucent listbox panel.
`item`	`[data-scope="select"][data-part="item"]`	Each selectable option.
`item-indicator`	`[data-scope="select"][data-part="item-indicator"]`	The checkmark shown on the selected option.

Tokens

Token	Controls
`--manti-select-height`	height
`--manti-select-padding-x`	padding x
`--manti-select-font-size`	font size
`--manti-select-icon-size`	icon size
`--manti-select-content-max-height`	content max height
`--manti-select-content-padding`	content padding
`--manti-select-content-gap`	content gap
`--manti-select-item-padding-y`	item padding y
`--manti-select-item-padding-x`	item padding x
`--manti-select-item-gap`	item gap
`--manti-select-item-radius`	item radius
`--manti-select-item-font-size`	item font size

Last updated 13 September 2026