Inputs

Select

A custom select dropdown built on the native Popover API. Supports keyboard navigation, type-ahead, and disabled options.

LlmSelect + LlmOption

Demo

<LlmSelect placeholder="Select a country" onValueChange={(v) => console.log(v)}>
  <LlmOption optionValue="us">United States</LlmOption>
  <LlmOption optionValue="ca">Canada</LlmOption>
  <LlmOption optionValue="uk" disabled={true}>United Kingdom (unavailable)</LlmOption>
</LlmSelect>

API

Prop	Type	Default	Description
`value`	`string`	`''`	Currently selected value
`onValueChange`	`(value: string) => void`	`—`	Called when selection changes
`placeholder`	`string`	`''`	Placeholder text when no option is selected
`disabled`	`boolean`	`false`	Disables the select
`readonly`	`boolean`	`false`	Makes the select read-only
`invalid`	`boolean`	`false`	Applies invalid/error styling
`required`	`boolean`	`false`	Marks field as required
`name`	`string`	`''`	HTML name attribute for form submission

Import

import { LlmSelect, LlmOption } from '@atelier-ui/react';