---
id: clipboard
title: Clipboard
description: A component to copy text to the clipboard
---

<ComponentPreview id="Clipboard" />

## Anatomy

<Anatomy id="clipboard" />

```tsx
<Clipboard.Root>
  <Clipboard.Label />
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator />
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>
```

## Examples

<Example id="basic" />

### Controlled

Control the clipboard value externally by managing the state yourself and using `onValueChange` to handle updates.

<Example id="controlled" />

### Root Provider

An alternative way to control the clipboard is to use the `RootProvider` component and the `useClipboard` hook. This way
you can access the state and methods from outside the component.

<Example id="root-provider" />

### Context

Access the clipboard's state with `Clipboard.Context` or the `useClipboardContext` hook. You get properties like
`copied`, `value`, and `setValue`.

> Alternatively, you can use the `useClipboardContext` hook to access the clipboard context.

<Example id="context" />

### Copy Status

Use the `onStatusChange` prop to listen for copy operations. It exposes a `copied` property that you can use to display
a success message.

<Example id="copy-status" />

### Timeout

Configure the copy status timeout duration using the `timeout` prop. Default is 3000ms (3 seconds).

<Example id="timeout" />

### Value Text

Use `Clipboard.ValueText` to display the current clipboard value.

<Example id="value-text" />

## API Reference

### Props

<ComponentTypes id="clipboard" />

### Context

<ContextType id="clipboard" />
