Select

A focusable dropdown selection widget for choosing one value from a list of options.

Usage

import { ui } from "@rezi-ui/core";

ui.select({
  id: "theme",
  value: state.theme,
  options: [
    { value: "dark", label: "Dark" },
    { value: "light", label: "Light" },
  ],
  onChange: (value) => app.update((s) => ({ ...s, theme: value })),
  placeholder: "Choose a theme…",
});

Props

Prop	Type	Default	Description
`id`	`string`	required	Unique identifier for focus and event routing
`value`	`string`	required	Currently selected value
`options`	`{ value: string; label: string }[]`	required	Available options
`onChange`	`(value: string) => void`	-	Called when selection changes
`disabled`	`boolean`	`false`	Disable focus and interaction
`placeholder`	`string`	-	Text shown when no matching option label is found
`key`	`string`	-	Reconciliation key

Behavior

Focusable when enabled.
Mouse click focuses the select widget.
Navigate options with ArrowUp/ArrowDown.
Confirm selection with Enter.
Tab / Shift+Tab moves focus to the next/previous widget.

Examples

1) With a `field` wrapper

import { ui } from "@rezi-ui/core";

ui.field({
  label: "Theme",
  children: ui.select({
    id: "theme",
    value: state.theme,
    options: [
      { value: "dark", label: "Dark" },
      { value: "light", label: "Light" },
    ],
    onChange: (v) => app.update((s) => ({ ...s, theme: v })),
  }),
});

2) Disabled state

import { ui } from "@rezi-ui/core";

ui.select({
  id: "country",
  value: "us",
  options: [{ value: "us", label: "United States" }],
  disabled: true,
});

Radio Group - Alternative single-choice input
Checkbox - Boolean toggle
Field - Labels, hints, and error display

Usage

Props

Behavior

Examples

1) With a field wrapper

2) Disabled state

Related

On this page

1) With a `field` wrapper