---
title: Action Sheet
description: A set of choices presented from the bottom of the screen.
---
import Source from './_generated/action-sheet.mdx';

A set of choices presented from the bottom of the screen, with an optional destructive action.

<DemoFrame component="action-sheet" height={560} />

## Installation

```bash
npx touchcn add action-sheet
```

## Usage

<CodeGroup>

```html Angular
<tcn-action-sheet
  [(open)]="open"
  [actions]="[{ label: 'Share' }, { label: 'Delete', destructive: true }]"
/>
```

```tsx React
import { TcnActionSheet } from '@/components/ui/action-sheet';

<TcnActionSheet
  open={open}
  onOpenChange={setOpen}
  actions={[{ label: 'Share' }, { label: 'Delete', destructive: true }]}
  onSelect={(index) => handle(index)}
/>
```

```vue Vue
<script setup lang="ts">
import { TcnActionSheet } from '@/components/ui/action-sheet';
</script>

<template>
  <TcnActionSheet
    v-model:open="open"
    :actions="[{ label: 'Share' }, { label: 'Delete', destructive: true }]"
    @select="(index) => handle(index)"
  />
</template>
```

</CodeGroup>

## Props

| Prop           | Type                        | Default    | Description                                  |
| -------------- | --------------------------- | ---------- | -------------------------------------------- |
| `open`         | `boolean`                   | `false`    | Open state (two-way bound on Angular).       |
| `onOpenChange` | `(open: boolean) => void`   | —          | Open-state callback (React).                 |
| `actions`      | `TcnActionSheetAction[]`    | `[]`       | Choices — `{ label, destructive? }`.         |
| `cancelLabel`  | `string`                    | `'Cancel'` | Cancel button label.                         |
| `onSelect`     | `(index: number) => void`   | —          | Fired with the chosen action index (React).  |

<Source />