Controls

Select

A dropdown whose options are SelectOption children; no native select is rendered.

import { Select, SelectOption } from '@iffday/ui';

Example

Options are SelectOption children. Select reads their values and labels and hands them to Base UI, so the page has no native <select>. The list opens 5px below the trigger instead of covering it; the selected option has a check, and disabled ones are faded.

Poster language

Usage

Values are strings. Numbers work too, but onValueChange receives a string; convert it back where needed.
An empty string can stand for All or None: the poster language filter and No rating both do this.
With a handful of options that readers should see at once, consider Tabs or a row of buttons.

Props

Select

packages/ui/src/controls.tsx:87

Prop	Type	Default
`children*`	`ReactNode`
`value`	`string \| number`
`defaultValue`	`string \| number`
`onValueChange`	`(value: string) => void`
`disabled`	`boolean`
`required`	`boolean`
`name`	`string`
`className`		`''`

Other props go to Omit<HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange'>.

SelectOption

packages/ui/src/controls.tsx:56

Declarative option data consumed by Select. No native select is rendered.

Prop	Type	Default
`value`	`string \| number`
`children*`	`ReactNode`
`disabled`	`boolean`