Component

Select

Render single-choice dropdowns for sorting, filtering, and view controls with mobile sheet behavior.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Select } from "@chitrank2050/monoline-ui/select"

Basic usage

<Select
  value={sort}
  onChange={setSort}
  options={[
    { value: "recent", label: "Most recent" },
    { value: "oldest", label: "Oldest first" },
    { value: "read",   label: "Most read" },
    { value: "az",     label: "Alphabetical" },
  ]}
>
  <Select.Trigger>
    <span className="flex items-baseline gap-2">
      <Select.Label>Sort:</Select.Label>
      <Select.Value />
    </span>
  </Select.Trigger>
	<Select.Content side="bottom" align="start" />
</Select>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Select fits a moderate option set and switches between a desktop popover and mobile sheet.

Avoid when

You need unsynchronized native form submission, multiple selection, or interactive content inside an option.

Accessibility

Select wires its trigger to a listbox, exposes options with aria-selected, and implements keyboard navigation, typeahead, focus management, and labeled trigger text.

Client Component

This component needs browser JavaScript for state or browser APIs.

API reference

Props, slots, and callbacks available on this component.

childrenReactNodeCompose Trigger, Value, Content, and Item slots

optionsSelectOption<T>[]Items shown in the list

valueTControlled selected value

onChange(value: T) => voidSelection change callback

size"sm" | "md" | "lg"Trigger scale

variant"default" | "ghost"Trigger visual treatment

sheetLabelstringMobile bottom-sheet heading

side"top" | "right" | "bottom" | "left"Desktop preferred placement; flips automatically when space is limited

align"start" | "center" | "end"Desktop alignment along the chosen side

collisionBoundaryElement | Element[]Optional desktop clipping boundary; defaults to the viewport

collisionPaddingnumber | SideObjectMinimum space from the collision boundary; defaults to 12px

Design tokens

Theme variables this component reads for color, spacing, and motion.

--surface / --surface-2CSS varNeutral trigger, menu, and selected row surfaces

--border / --border-strongCSS varResting and interactive boundaries

--focus-ringCSS varKeyboard focus shadow

--duration-micro + --duration-shortCSS varTrigger and menu motion timing

Implementation

The source used by the example above, including any state it needs.

import { Select } from "@chitrank2050/monoline-ui/select"

export function SortControl() {
  const [sort, setSort] = useState("recent")

  return (
    <Select
      value={sort}
      onChange={setSort}
      options={[
        { value: "recent", label: "Most recent" },
        { value: "oldest", label: "Oldest first" },
        { value: "read", label: "Most read" },
      ]}
      sheetLabel="Sort by"
    >
      <Select.Trigger>
        <span className="flex items-baseline gap-2">
          <Select.Label>Sort:</Select.Label>
          <Select.Value />
        </span>
      </Select.Trigger>
		<Select.Content side="bottom" align="start" />
    </Select>
  )
}

Compare related components or review the package and theme setup.

01ComponentInputComponent · ReferenceReference→02ComponentSegmented ControlComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview