AeontelAeontel Docs

Select

Accessible select with trigger, content, grouped items.

Usage

TSX
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@aeontel/ui";

<Select value={model} onValueChange={setModel}>
  <SelectTrigger>
    <SelectValue placeholder="Select a model" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="anthropic/claude-sonnet-4-5">Sonnet 4.5</SelectItem>
    <SelectItem value="openai/gpt-4o">GPT-4o</SelectItem>
  </SelectContent>
</Select>;

Exports

Select

Root select control.

TypeScript
Select(props: ComponentProps): JSX.Element

SelectTrigger

Button that opens the select dropdown.

TypeScript
SelectTrigger(props: SelectPrimitive.Trigger.Props & { size?: "sm" | "default"; }): JSX.Element

Props

PropTypeDefaultDescription
size?"default" | "sm" | undefined"default"

SelectValue

Renders the currently selected value inside the trigger.

TypeScript
SelectValue(props: SelectPrimitive.Value.Props): JSX.Element

SelectContent

Floating panel that lists the options.

TypeScript
SelectContent(props: SelectPrimitive.Popup.Props & Pick< SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" >): JSX.Element

SelectGroup

Group of related select items.

TypeScript
SelectGroup(props: SelectPrimitive.Group.Props): JSX.Element

SelectLabel

Group label inside the select content.

TypeScript
SelectLabel(props: SelectPrimitive.GroupLabel.Props): JSX.Element

SelectItem

Individual selectable option.

TypeScript
SelectItem(props: SelectPrimitive.Item.Props): JSX.Element

SelectSeparator

Horizontal rule between select groups.

TypeScript
SelectSeparator(props: SelectPrimitive.Separator.Props): JSX.Element