---
title: Select
description: A single-select field opening a dropdown (MD) or picker sheet (iOS).
---
import Source from './_generated/select.mdx';

A single-select form control. The trigger renders as an input-like field; opening reveals a platform-appropriate list — an anchored dropdown on Material (flipping above when short on room) and a bottom-sheet picker on iOS.

<DemoFrame component="select" height={560} />

## Installation

```bash
npx touchcn add select
```

## Usage

<CodeGroup>

```html Angular
<tcn-select [(value)]="fruit" label="Favorite fruit" placeholder="Choose a fruit">
  <tcn-select-option value="apple">Apple</tcn-select-option>
  <tcn-select-option value="banana">Banana</tcn-select-option>
</tcn-select>
```

```tsx React
import { TcnSelect, TcnSelectOption } from '@/components/ui/select';

<TcnSelect value={fruit} onValueChange={setFruit} label="Favorite fruit">
  <TcnSelectOption value="apple">Apple</TcnSelectOption>
  <TcnSelectOption value="banana">Banana</TcnSelectOption>
</TcnSelect>
```

```vue Vue
<script setup lang="ts">
import { TcnSelect, TcnSelectOption } from '@/components/ui/select';
</script>

<template>
  <TcnSelect v-model="fruit" label="Favorite fruit">
    <TcnSelectOption value="apple">Apple</TcnSelectOption>
    <TcnSelectOption value="banana">Banana</TcnSelectOption>
  </TcnSelect>
</template>
```

</CodeGroup>

## Props

| Prop            | Type                          | Default      | Description                             |
| --------------- | ----------------------------- | ------------ | --------------------------------------- |
| `value`         | `string \| null`              | `null`       | Selected value (two-way on Angular).    |
| `onValueChange` | `(value: string) => void`     | —            | Selection callback (React).             |
| `label`         | `string`                      | `''`         | Field label.                            |
| `placeholder`   | `string`                      | `'Select…'`  | Shown when nothing is selected.         |
| `disabled`      | `boolean`                     | `false`      | Disable the control.                    |

<Source />