---
title: "Select"
description: "Accessible select with trigger, content, grouped items."
section: "Libraries"
group: "UI components"
order: 516
---

## 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.

```ts
Select(props: ComponentProps): JSX.Element
```

### `SelectTrigger`

Button that opens the select dropdown.

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

**Props**

| Prop    | Type                             | Default     | Description |
| ------- | -------------------------------- | ----------- | ----------- |
| `size?` | `"default" \| "sm" \| undefined` | `"default"` |             |

### `SelectValue`

Renders the currently selected value inside the trigger.

```ts
SelectValue(props: SelectPrimitive.Value.Props): JSX.Element
```

### `SelectContent`

Floating panel that lists the options.

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

### `SelectGroup`

Group of related select items.

```ts
SelectGroup(props: SelectPrimitive.Group.Props): JSX.Element
```

### `SelectLabel`

Group label inside the select content.

```ts
SelectLabel(props: SelectPrimitive.GroupLabel.Props): JSX.Element
```

### `SelectItem`

Individual selectable option.

```ts
SelectItem(props: SelectPrimitive.Item.Props): JSX.Element
```

### `SelectSeparator`

Horizontal rule between select groups.

```ts
SelectSeparator(props: SelectPrimitive.Separator.Props): JSX.Element
```