Select — Atelier

Demo

Live PreviewReact

jsx

<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 (Angular)

Prop	Type	Default	Description
`[(value)]`	`string`	`''`	Currently selected value
`(valueChange)`	`(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

Composition parts

Select is composed from the parts below. Each part is its own component — drop the ones you don't need.

`LlmOption`

A selectable option inside LlmSelect. The visible label is the element's children.

Prop	Type	Default	Description
`optionValue`	`string`	`—`	Value committed to the parent LlmSelect when selected (required).
`disabled`	`boolean`	`false`	Prevent the option from being focused or selected.

Import

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

Accessibility

ARIA rolecombobox / listbox

Key	Action
`Enter / Space / Arrow Down`	Open the listbox.
`Arrow Up / Down`	Move between options.
`Home / End`	Jump to the first / last option.
`Enter`	Confirm the highlighted option and close.
`Escape`	Close without changing selection.
`Type a character`	Jump to the next option starting with that letter.

Explore in Storybook

Prototyping with AI

Best practices

Always use "LlmOption" for items within the "LlmSelect".
Specify the "optionValue" for each option to ensure correct selection logic.
Use the "placeholder" prop to provide a default empty state.

Common hallucinations

AI may use standard HTML "select" and "option" tags.
AI may try to use "items" or "options" prop instead of the composable child pattern.

Example prompt

Create an LlmSelect for choosing a "Plan" with options "Basic", "Pro", and "Enterprise".