Select

Select allows users to choose a single option from a filterable dropdown list. Supports keyboard navigation, validation states, and dense mode (compact) for space-constrained layouts.

diwa-select — Properties

Name	Type	Default	Description
`theme`	`'light' \| 'dark'`	`'dark'`	Per-component theme override. Sets data-theme on the host so token overrides cascade into Shadow DOM.
`label`	`string`	`undefined`	Visible label text. Also used as the placeholder when no option is selected.
`description`	`string`	`undefined`	Optional hint text rendered between the label and the trigger.
`name`	`string`	`''`	Field name emitted in the change event detail.
`value`	`string \| undefined`	`undefined`	Currently selected value. Mutable — updated by user interaction and programmatic assignment.
`state`	`'none' \| 'error' \| 'success'`	`'none'`	Validation state. Controls border colour and message colour.
`message`	`string`	`undefined`	Helper or validation message. Only rendered when state is not "none".
`hide-label`	`boolean`	`false`	Visually hides the label while keeping it accessible to screen readers.
`disabled`	`boolean`	`false`	Disables the component. Prevents opening and applies reduced opacity.
`required`	`boolean`	`false`	Marks the field as required. Adds an asterisk to the label and sets aria-required.
`compact`	`boolean`	`false`	Enables dense mode. Reduces trigger height from 44 px (default touch target) to 32 px.
`dropdown-direction`	`'auto' \| 'up' \| 'down'`	`'auto'`	Controls which direction the dropdown opens. "auto" detects available viewport space.

diwa-select — Events

Name	Detail type	Bubbles	Description
`change`	`{ name: string; value: string }`	Yes	Emitted when the user selects an option.
`toggle`	`{ open: boolean }`	No	Emitted when the dropdown opens or closes.
`blur`	`void`	No	Emitted when the dropdown closes due to an outside click.

React 19: use lowercase event names as props: onchange, ontoggle, onblur.

diwa-select — Methods

Signature	Description
`open(): Promise<void>`	Programmatically opens the dropdown.
`close(): Promise<void>`	Programmatically closes the dropdown.

diwa-select-option — Properties

Name	Type	Default	Description
`value`	`string \| undefined`	`undefined`	The value emitted when this option is selected. Omit to create a deselect / placeholder option.
`disabled`	`boolean`	`false`	Disables the option — it is shown but cannot be selected.
`selected`	`boolean`	`false`	Whether the option is currently selected. Managed by the parent diwa-select.
`highlighted`	`boolean`	`false`	Whether the option is keyboard-highlighted. Set exclusively by the parent.
`theme`	`'light' \| 'dark'`	`'dark'`	Theme — inherited automatically from the parent diwa-select.