# Clipboard (REACT)



## Anatomy



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

## Examples

**Example: basic**

#### React

```tsx
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import styles from 'styles/clipboard.module.css'

export const Basic = () => {
  return (
    <Clipboard.Root className={styles.Root} value="https://ark-ui.com">
      <Clipboard.Label className={styles.Label}>Copy this link</Clipboard.Label>
      <Clipboard.Control className={styles.Control}>
        <Clipboard.Input className={styles.Input} />
        <Clipboard.Trigger className={styles.Trigger}>
          <Clipboard.Indicator className={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

```

#### Solid

```tsx
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import styles from 'styles/clipboard.module.css'

export const Basic = () => {
  return (
    <Clipboard.Root class={styles.Root} value="https://ark-ui.com">
      <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
      <Clipboard.Control class={styles.Control}>
        <Clipboard.Input class={styles.Input} />
        <Clipboard.Trigger class={styles.Trigger}>
          <Clipboard.Indicator class={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import styles from 'styles/clipboard.module.css'
</script>

<template>
  <Clipboard.Root :class="styles.Root" default-value="https://ark-ui.com">
    <Clipboard.Label :class="styles.Label">Copy this link</Clipboard.Label>
    <Clipboard.Control :class="styles.Control">
      <Clipboard.Input :class="styles.Input" />
      <Clipboard.Trigger :class="styles.Trigger">
        <Clipboard.Indicator :class="styles.Indicator">
          <ClipboardCopyIcon />
          <template #copied>
            <CheckIcon />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import styles from 'styles/clipboard.module.css'
</script>

<Clipboard.Root class={styles.Root} value="https://ark-ui.com">
  <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
  <Clipboard.Control class={styles.Control}>
    <Clipboard.Input class={styles.Input} />
    <Clipboard.Trigger class={styles.Trigger}>
      <Clipboard.Indicator class={styles.Indicator}>
        {#snippet copied()}
          <CheckIcon />
        {/snippet}
        <ClipboardCopyIcon />
      </Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

```

### Controlled

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

**Example: controlled**

#### React

```tsx
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import { useState } from 'react'
import button from 'styles/button.module.css'
import styles from 'styles/clipboard.module.css'

export const Controlled = () => {
  const [url, setUrl] = useState('https://ark-ui.com')

  return (
    <div className="stack">
      <Clipboard.Root className={styles.Root} value={url} onValueChange={(details) => setUrl(details.value)}>
        <Clipboard.Label className={styles.Label}>Copy this link</Clipboard.Label>
        <Clipboard.Control className={styles.Control}>
          <Clipboard.Input className={styles.Input} />
          <Clipboard.Trigger className={styles.Trigger}>
            <Clipboard.Indicator className={styles.Indicator} copied={<CheckIcon />}>
              <ClipboardCopyIcon />
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.Root>

      <button className={button.Root} onClick={() => setUrl('https://chakra-ui.com')}>
        Change Url
      </button>
    </div>
  )
}

```

#### Solid

```tsx
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/clipboard.module.css'

export const Controlled = () => {
  const [url, setUrl] = createSignal('https://ark-ui.com')

  return (
    <div class="stack">
      <Clipboard.Root class={styles.Root} value={url()} onValueChange={(details) => setUrl(details.value)}>
        <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
        <Clipboard.Control class={styles.Control}>
          <Clipboard.Input class={styles.Input} />
          <Clipboard.Trigger class={styles.Trigger}>
            <Clipboard.Indicator class={styles.Indicator} copied={<CheckIcon />}>
              <ClipboardCopyIcon />
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.Root>

      <button class={button.Root} onClick={() => setUrl('https://chakra-ui.com')}>
        Change Url
      </button>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import button from 'styles/button.module.css'
import styles from 'styles/clipboard.module.css'

const url = ref('https://ark-ui.com')
</script>

<template>
  <div class="stack">
    <Clipboard.Root :class="styles.Root" v-model="url">
      <Clipboard.Label :class="styles.Label">Copy this link</Clipboard.Label>
      <Clipboard.Control :class="styles.Control">
        <Clipboard.Input :class="styles.Input" />
        <Clipboard.Trigger :class="styles.Trigger">
          <Clipboard.Indicator :class="styles.Indicator">
            <ClipboardCopyIcon />
            <template #copied>
              <CheckIcon />
            </template>
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>

    <button :class="button.Root" @click="url = 'https://chakra-ui.com'">Change Url</button>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import button from 'styles/button.module.css'
  import styles from 'styles/clipboard.module.css'

  let url = $state('https://ark-ui.com')
</script>

<div class="stack">
  <Clipboard.Root class={styles.Root} bind:value={url}>
    <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
    <Clipboard.Control class={styles.Control}>
      <Clipboard.Input class={styles.Input} />
      <Clipboard.Trigger class={styles.Trigger}>
        <Clipboard.Indicator class={styles.Indicator}>
          {#snippet copied()}
            <CheckIcon />
          {/snippet}
          <ClipboardCopyIcon />
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>

  <button class={button.Root} onclick={() => (url = 'https://chakra-ui.com')}>Change Url</button>
</div>

```

### 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: root-provider**

#### React

```tsx
import { Clipboard, useClipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import styles from 'styles/clipboard.module.css'

export const RootProvider = () => {
  const clipboard = useClipboard({ value: 'https://ark-ui.com' })

  return (
    <div className="stack">
      <output>
        value: {clipboard.value}, copied: {String(clipboard.copied)}
      </output>
      <Clipboard.RootProvider className={styles.Root} value={clipboard}>
        <Clipboard.Label className={styles.Label}>Copy this link</Clipboard.Label>
        <Clipboard.Control className={styles.Control}>
          <Clipboard.Input className={styles.Input} />
          <Clipboard.Trigger className={styles.Trigger}>
            <Clipboard.Indicator className={styles.Indicator} copied={<CheckIcon />}>
              <ClipboardCopyIcon />
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { Clipboard, useClipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import styles from 'styles/clipboard.module.css'

export const RootProvider = () => {
  const clipboard = useClipboard({ value: 'https://ark-ui.com' })

  return (
    <div class="stack">
      <output>
        value: {clipboard().value}, copied: {String(clipboard().copied)}
      </output>
      <Clipboard.RootProvider class={styles.Root} value={clipboard}>
        <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
        <Clipboard.Control class={styles.Control}>
          <Clipboard.Input class={styles.Input} />
          <Clipboard.Trigger class={styles.Trigger}>
            <Clipboard.Indicator class={styles.Indicator} copied={<CheckIcon />}>
              <ClipboardCopyIcon />
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard, useClipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import styles from 'styles/clipboard.module.css'

const clipboard = useClipboard({ value: 'https://ark-ui.com' })
</script>

<template>
  <div class="stack">
    <output>value: {{ clipboard.value }}, copied: {{ String(clipboard.copied) }}</output>
    <Clipboard.RootProvider :class="styles.Root" :value="clipboard">
      <Clipboard.Label :class="styles.Label">Copy this link</Clipboard.Label>
      <Clipboard.Control :class="styles.Control">
        <Clipboard.Input :class="styles.Input" />
        <Clipboard.Trigger :class="styles.Trigger">
          <Clipboard.Indicator :class="styles.Indicator">
            <ClipboardCopyIcon />
            <template #copied>
              <CheckIcon />
            </template>
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard, useClipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import styles from 'styles/clipboard.module.css'

  const clipboard = useClipboard(() => ({ value: 'https://ark-ui.com' }))
</script>

<div class="stack">
  <output>
    value: {clipboard().value}, copied: {String(clipboard().copied)}
  </output>
  <Clipboard.RootProvider class={styles.Root} value={clipboard}>
    <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
    <Clipboard.Control class={styles.Control}>
      <Clipboard.Input class={styles.Input} />
      <Clipboard.Trigger class={styles.Trigger}>
        <Clipboard.Indicator class={styles.Indicator}>
          {#snippet copied()}
            <CheckIcon />
          {/snippet}
          <ClipboardCopyIcon />
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.RootProvider>
</div>

```

### Context

Access the clipboard state and methods using `Clipboard.Context`. This provides access to properties like `copied`,
`value`, and `setValue`

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

**Example: context**

#### React

```tsx
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import button from 'styles/button.module.css'
import styles from 'styles/clipboard.module.css'

export const Context = () => {
  return (
    <Clipboard.Root className={styles.Root} value="https://ark-ui.com">
      <Clipboard.Label className={styles.Label}>Copy this link</Clipboard.Label>
      <Clipboard.Context>
        {(clipboard) => (
          <button className={button.Root} onClick={() => clipboard.copy()}>
            {clipboard.copied ? <CheckIcon /> : <ClipboardCopyIcon />}
            {clipboard.copied ? 'Copied!' : 'Copy'}
          </button>
        )}
      </Clipboard.Context>
    </Clipboard.Root>
  )
}

```

#### Solid

```tsx
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import { Show } from 'solid-js'
import button from 'styles/button.module.css'
import styles from 'styles/clipboard.module.css'

export const Context = () => {
  return (
    <Clipboard.Root class={styles.Root} value="https://ark-ui.com">
      <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
      <Clipboard.Context>
        {(clipboard) => (
          <button class={button.Root} onClick={() => clipboard().copy()}>
            <Show when={clipboard().copied} fallback={<ClipboardCopyIcon />}>
              <CheckIcon />
            </Show>
            <Show when={clipboard().copied} fallback="Copy">
              Copied!
            </Show>
          </button>
        )}
      </Clipboard.Context>
    </Clipboard.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import button from 'styles/button.module.css'
import styles from 'styles/clipboard.module.css'
</script>

<template>
  <Clipboard.Root :class="styles.Root" default-value="https://ark-ui.com">
    <Clipboard.Label :class="styles.Label">Copy this link</Clipboard.Label>
    <Clipboard.Context v-slot="clipboard">
      <button :class="button.Root" @click="clipboard.copy()">
        <CheckIcon v-if="clipboard.copied" />
        <ClipboardCopyIcon v-else />
        {{ clipboard.copied ? 'Copied!' : 'Copy' }}
      </button>
    </Clipboard.Context>
  </Clipboard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import button from 'styles/button.module.css'
  import styles from 'styles/clipboard.module.css'
</script>

<Clipboard.Root class={styles.Root} value="https://ark-ui.com">
  <Clipboard.Label class={styles.Label}>Copy this link</Clipboard.Label>
  <Clipboard.Context>
    {#snippet render(clipboard)}
      <button class={button.Root} onclick={() => clipboard().copy()}>
        {#if clipboard().copied}
          <CheckIcon />
          Copied!
        {:else}
          <ClipboardCopyIcon />
          Copy
        {/if}
      </button>
    {/snippet}
  </Clipboard.Context>
</Clipboard.Root>

```

### 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: copy-status**

#### React

```tsx
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import { useState } from 'react'
import styles from 'styles/clipboard.module.css'

export const CopyStatus = () => {
  const [copyCount, setCopyCount] = useState(0)

  return (
    <Clipboard.Root
      className={styles.Root}
      value="https://ark-ui.com"
      onStatusChange={(details) => {
        if (details.copied) setCopyCount((prev) => prev + 1)
      }}
    >
      <Clipboard.Control className={styles.Control}>
        <Clipboard.Trigger className={styles.Trigger}>
          <Clipboard.Indicator className={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
          <Clipboard.ValueText />
        </Clipboard.Trigger>
      </Clipboard.Control>
      <p>Copied {copyCount} times</p>
    </Clipboard.Root>
  )
}

```

#### Solid

```tsx
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import { createSignal } from 'solid-js'
import styles from 'styles/clipboard.module.css'

export const CopyStatus = () => {
  const [copyCount, setCopyCount] = createSignal(0)

  return (
    <Clipboard.Root
      class={styles.Root}
      value="https://ark-ui.com"
      onStatusChange={(details) => {
        if (details.copied) {
          setCopyCount((prev) => prev + 1)
        }
      }}
    >
      <Clipboard.Control class={styles.Control}>
        <Clipboard.Trigger class={styles.Trigger}>
          <Clipboard.Indicator class={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
      <p>Copied {copyCount()} times</p>
    </Clipboard.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import { ref } from 'vue'
import styles from 'styles/clipboard.module.css'

const copyCount = ref(0)
</script>

<template>
  <Clipboard.Root
    :class="styles.Root"
    default-value="https://ark-ui.com"
    @status-change="
      (details) => {
        if (details.copied) {
          copyCount += 1
        }
      }
    "
  >
    <Clipboard.Control :class="styles.Control">
      <Clipboard.Trigger :class="styles.Trigger">
        <Clipboard.Indicator :class="styles.Indicator">
          <ClipboardCopyIcon />
          <template #copied>
            <CheckIcon />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
    <p>Copied {{ copyCount }} times</p>
  </Clipboard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import styles from 'styles/clipboard.module.css'

  let copyCount = $state(0)
</script>

<Clipboard.Root
  class={styles.Root}
  value="https://ark-ui.com"
  onStatusChange={(details) => {
    if (details.copied) {
      copyCount += 1
    }
  }}
>
  <Clipboard.Control class={styles.Control}>
    <Clipboard.Trigger class={styles.Trigger}>
      <Clipboard.Indicator class={styles.Indicator}>
        {#snippet copied()}
          <CheckIcon />
        {/snippet}
        <ClipboardCopyIcon />
      </Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
  <p>Copied {copyCount} times</p>
</Clipboard.Root>

```

### Timeout

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

**Example: timeout**

#### React

```tsx
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import styles from 'styles/clipboard.module.css'

export const Timeout = () => {
  return (
    <Clipboard.Root className={styles.Root} value="https://ark-ui.com" timeout={5000}>
      <Clipboard.Label className={styles.Label}>Copy this link (5 second timeout)</Clipboard.Label>
      <Clipboard.Control className={styles.Control}>
        <Clipboard.Input className={styles.Input} />
        <Clipboard.Trigger className={styles.Trigger}>
          <Clipboard.Indicator className={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

```

#### Solid

```tsx
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import styles from 'styles/clipboard.module.css'

export const Timeout = () => {
  return (
    <Clipboard.Root class={styles.Root} value="https://ark-ui.com" timeout={5000}>
      <Clipboard.Label class={styles.Label}>Copy this link (5 second timeout)</Clipboard.Label>
      <Clipboard.Control class={styles.Control}>
        <Clipboard.Input class={styles.Input} />
        <Clipboard.Trigger class={styles.Trigger}>
          <Clipboard.Indicator class={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import styles from 'styles/clipboard.module.css'
</script>

<template>
  <Clipboard.Root :class="styles.Root" default-value="https://ark-ui.com" :timeout="5000">
    <Clipboard.Label :class="styles.Label">Copy this link (5 second timeout)</Clipboard.Label>
    <Clipboard.Control :class="styles.Control">
      <Clipboard.Input :class="styles.Input" />
      <Clipboard.Trigger :class="styles.Trigger">
        <Clipboard.Indicator :class="styles.Indicator">
          <ClipboardCopyIcon />
          <template #copied>
            <CheckIcon />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import styles from 'styles/clipboard.module.css'
</script>

<Clipboard.Root class={styles.Root} value="https://ark-ui.com" timeout={5000}>
  <Clipboard.Label class={styles.Label}>Copy this link (5 second timeout)</Clipboard.Label>
  <Clipboard.Control class={styles.Control}>
    <Clipboard.Input class={styles.Input} />
    <Clipboard.Trigger class={styles.Trigger}>
      <Clipboard.Indicator class={styles.Indicator}>
        {#snippet copied()}
          <CheckIcon />
        {/snippet}
        <ClipboardCopyIcon />
      </Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

```

### Value Text

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

**Example: value-text**

#### React

```tsx
import { Clipboard } from '@ark-ui/react/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import styles from 'styles/clipboard.module.css'

export const ValueText = () => {
  return (
    <Clipboard.Root className={styles.Root} value="https://ark-ui.com">
      <Clipboard.Control className={styles.Control}>
        <Clipboard.ValueText className={styles.ValueText} />
        <Clipboard.Trigger className={styles.Trigger}>
          <Clipboard.Indicator className={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

```

#### Solid

```tsx
import { Clipboard } from '@ark-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import styles from 'styles/clipboard.module.css'

export const ValueText = () => {
  return (
    <Clipboard.Root class={styles.Root} value="https://ark-ui.com">
      <Clipboard.Control class={styles.Control}>
        <Clipboard.ValueText class={styles.ValueText} />
        <Clipboard.Trigger class={styles.Trigger}>
          <Clipboard.Indicator class={styles.Indicator} copied={<CheckIcon />}>
            <ClipboardCopyIcon />
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { Clipboard } from '@ark-ui/vue/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
import styles from 'styles/clipboard.module.css'
</script>

<template>
  <Clipboard.Root :class="styles.Root" default-value="https://ark-ui.com">
    <Clipboard.Control :class="styles.Control">
      <Clipboard.ValueText :class="styles.ValueText" />
      <Clipboard.Trigger :class="styles.Trigger">
        <Clipboard.Indicator :class="styles.Indicator">
          <ClipboardCopyIcon />
          <template #copied>
            <CheckIcon />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Clipboard } from '@ark-ui/svelte/clipboard'
  import { CheckIcon, ClipboardCopyIcon } from 'lucide-svelte'
  import styles from 'styles/clipboard.module.css'
</script>

<Clipboard.Root class={styles.Root} value="https://ark-ui.com">
  <Clipboard.Control class={styles.Control}>
    <Clipboard.ValueText class={styles.ValueText} />
    <Clipboard.Trigger class={styles.Trigger}>
      <Clipboard.Indicator class={styles.Indicator}>
        {#snippet copied()}
          <CheckIcon />
        {/snippet}
        <ClipboardCopyIcon />
      </Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to be copied to the clipboard when rendered.
Use when you don't need to control the value of the clipboard. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; input: string; label: string }>` | No | The ids of the elements in the clipboard. Useful for composition. |
| `onStatusChange` | `(details: CopyStatusDetails) => void` | No | The function to be called when the value is copied to the clipboard |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The function to be called when the value changes |
| `timeout` | `number` | No | The timeout for the copy operation |
| `value` | `string` | No | The controlled value of the clipboard |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | root |
| `[data-copied]` | Present when copied state is true |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | control |
| `[data-copied]` | Present when copied state is true |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `copied` | `string | number | bigint | boolean | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...>` | No |  |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | input |
| `[data-copied]` | Present when copied state is true |
| `[data-readonly]` | Present when read-only |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | label |
| `[data-copied]` | Present when copied state is true |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseClipboardReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | trigger |
| `[data-copied]` | Present when copied state is true |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to be copied to the clipboard when rendered.
Use when you don't need to control the value of the clipboard. |
| `ids` | `Partial<{ root: string; input: string; label: string }>` | No | The ids of the elements in the clipboard. Useful for composition. |
| `onStatusChange` | `(details: CopyStatusDetails) => void` | No | The function to be called when the value is copied to the clipboard |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The function to be called when the value changes |
| `timeout` | `number` | No | The timeout for the copy operation |
| `value` | `string` | No | The controlled value of the clipboard |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | root |
| `[data-copied]` | Present when copied state is true |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | control |
| `[data-copied]` | Present when copied state is true |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `copied` | `number | boolean | Node | ArrayElement | (string & {})` | No |  |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | input |
| `[data-copied]` | Present when copied state is true |
| `[data-readonly]` | Present when read-only |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | label |
| `[data-copied]` | Present when copied state is true |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseClipboardReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'button'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | trigger |
| `[data-copied]` | Present when copied state is true |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'span'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to be copied to the clipboard when rendered.
Use when you don't need to control the value of the clipboard. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; input: string; label: string }>` | No | The ids of the elements in the clipboard. Useful for composition. |
| `modelValue` | `string` | No | The v-model value of the clipboard |
| `timeout` | `number` | No | The timeout for the copy operation |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | root |
| `[data-copied]` | Present when copied state is true |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | control |
| `[data-copied]` | Present when copied state is true |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | input |
| `[data-copied]` | Present when copied state is true |
| `[data-readonly]` | Present when read-only |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | label |
| `[data-copied]` | Present when copied state is true |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `ClipboardApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | trigger |
| `[data-copied]` | Present when copied state is true |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `defaultValue` | `string` | No | The initial value to be copied to the clipboard when rendered.
Use when you don't need to control the value of the clipboard. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{ root: string; input: string; label: string }>` | No | The ids of the elements in the clipboard. Useful for composition. |
| `onStatusChange` | `(details: CopyStatusDetails) => void` | No | The function to be called when the value is copied to the clipboard |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | The function to be called when the value changes |
| `ref` | `Element` | No |  |
| `timeout` | `number` | No | The timeout for the copy operation |
| `value` | `string` | No | The controlled value of the clipboard |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | root |
| `[data-copied]` | Present when copied state is true |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UseClipboardContext]>` | No |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Control Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | control |
| `[data-copied]` | Present when copied state is true |


**Indicator Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `copied` | `Snippet<[]>` | No |  |
| `ref` | `Element` | No |  |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | input |
| `[data-copied]` | Present when copied state is true |
| `[data-readonly]` | Present when read-only |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | label |
| `[data-copied]` | Present when copied state is true |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UseClipboardReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'button'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Trigger Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | clipboard |
| `[data-part]` | trigger |
| `[data-copied]` | Present when copied state is true |


**ValueText Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'span'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `copied` | `boolean` | Whether the value has been copied to the clipboard |
| `value` | `string` | The value to be copied to the clipboard |
| `setValue` | `(value: string) => void` | Set the value to be copied to the clipboard |
| `copy` | `VoidFunction` | Copy the value to the clipboard |