Clipboard

A component that allows users to copy text to the clipboard.

<script setup lang="ts">
import { Clipboard } from '@destyler-ui/vue'
</script>

<template>
  <Clipboard.Root value="https.//destyler.org">
    <Clipboard.Label>Copy this link</Clipboard.Label>
    <Clipboard.Control>
      <Clipboard.Input />
      <Clipboard.Trigger>
        <Clipboard.Indicator>
          <span class="i-tabler-copy" />
          <template #copied>
            <span class="i-tabler-check" />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

import { Clipboard } from '@destyler-ui/react'

export function Basic() {
  return (
    <Clipboard.Root value="https://destyler.org">
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Indicator copied={
            <span>Copied!</span>
          }
          >
            <span>Copy</span>
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

import { Clipboard } from '@destyler-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'

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

<script lang="ts">
  import { Clipboard } from '@destyler-ui/svelte'
</script>

{#snippet copied()}
  <span>Copied!</span>
{/snippet}

<Clipboard.Root value="https://destyler.org">
  <Clipboard.Label>Copy this link</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator {copied}><span>Copy</span></Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

Anatomy

<script setup lang="ts">
import { Clipboard } from '@destyler-ui/vue'
</script>

<template>
  <Clipboard.Root>
    <Clipboard.Label />
    <Clipboard.Control>
      <Clipboard.Input />
      <Clipboard.Trigger>
        <Clipboard.Indicator />
      </Clipboard.Trigger>
    </Clipboard.Control>
    <Clipboard.ValueText />
  </Clipboard.Root>
</template>

import { Clipboard } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Clipboard.Root>
      <Clipboard.Label />
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Indicator />
        </Clipboard.Trigger>
      </Clipboard.Control>
      <Clipboard.ValueText />
    </Clipboard.Root>
  )
}

import { Clipboard } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Clipboard.Root>
      <Clipboard.Label />
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Indicator />
        </Clipboard.Trigger>
      </Clipboard.Control>
      <Clipboard.ValueText />
    </Clipboard.Root>
  )
}

<script lang="ts">
  import { Clipboard } from '@destyler-ui/svelte'
</script>

{#snippet copied()}
  <span>Copied!</span>
{/snippet}

<Clipboard.Root value="https://destyler.org">
  <Clipboard.Label>Copy this link</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator {copied}><span>Copy</span></Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

Examples

Basic

<script setup lang="ts">
import { Clipboard } from '@destyler-ui/vue'
</script>

<template>
  <Clipboard.Root value="https.//destyler.org">
    <Clipboard.Label>Copy this link</Clipboard.Label>
    <Clipboard.Control>
      <Clipboard.Input />
      <Clipboard.Trigger>
        <Clipboard.Indicator>
          <span class="i-tabler-copy" />
          <template #copied>
            <span class="i-tabler-check" />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

import { Clipboard } from '@destyler-ui/react'

export function Basic() {
  return (
    <Clipboard.Root value="https://destyler.org">
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Indicator copied={
            <span>Copied!</span>
          }
          >
            <span>Copy</span>
          </Clipboard.Indicator>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

import { Clipboard } from '@destyler-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'

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

<script lang="ts">
  import { Clipboard } from '@destyler-ui/svelte'
</script>

{#snippet copied()}
  <span>Copied!</span>
{/snippet}

<Clipboard.Root value="https://destyler.org">
  <Clipboard.Label>Copy this link</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator {copied}><span>Copy</span></Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

Render Function

Use render function to customize the clipboard indicator.

<script setup lang="ts">
import { Clipboard } from '@destyler-ui/vue'
</script>

<template>
  <Clipboard.Root value="https.//destyler.org">
    <Clipboard.Label>Copy this link</Clipboard.Label>
    <Clipboard.Control>
      <Clipboard.Input />
      <Clipboard.Trigger>
        <Clipboard.Context v-slot="{ copied }">
          <span v-if="copied" class="i-tabler-check" />
          <span v-else class="i-tabler-copy" />
        </Clipboard.Context>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.Root>
</template>

import { Clipboard } from '@destyler-ui/react'

export function RenderFn() {
  return (
    <Clipboard.Root value="https://destyler.org">
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Context>
            {clipboard => (clipboard.copied ? <span>Copied</span> : <span>Copy</span>)}
          </Clipboard.Context>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

import { Clipboard } from '@destyler-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import { Show } from 'solid-js'

export function RenderFn() {
  return (
    <Clipboard.Root value="https://ui-ui.com">
      <Clipboard.Label>Copy this link</Clipboard.Label>
      <Clipboard.Control>
        <Clipboard.Input />
        <Clipboard.Trigger>
          <Clipboard.Context>
            {context => (
              <Show when={context().copied} fallback={<ClipboardCopyIcon />}>
                <CheckIcon />
              </Show>
            )}
          </Clipboard.Context>
        </Clipboard.Trigger>
      </Clipboard.Control>
    </Clipboard.Root>
  )
}

<script lang="ts">
  import { Clipboard } from '@destyler-ui/svelte'
</script>

<Clipboard.Root value="https://destyler.org">
  <Clipboard.Label>Copy this link</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Context>
        {#snippet render(clipboard)}
          <span>{clipboard().copied ? 'Copied' : 'Copy'}</span>
        {/snippet}
      </Clipboard.Context>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

Root Provider

<script setup lang="ts">
import { Clipboard, useClipboard } from '@destyler-ui/vue'

const clipboard = useClipboard({ value: 'https.//destyler.org' })
</script>

<template>
  <button @click="clipboard.copy()">Copy</button>

  <Clipboard.RootProvider :value="clipboard">
    <Clipboard.Label>Copy this link</Clipboard.Label>
    <Clipboard.Control>
      <Clipboard.Input />
      <Clipboard.Trigger>
        <Clipboard.Indicator>
          <span class="i-tabler-copy" />
          <template #copied>
            <span class="i-tabler-check" />
          </template>
        </Clipboard.Indicator>
      </Clipboard.Trigger>
    </Clipboard.Control>
  </Clipboard.RootProvider>
</template>

import { Clipboard, useClipboard } from '@destyler-ui/react'

export function RootProvider() {
  const clipboard = useClipboard({ value: 'https://destyler.org' })

  return (
    <>
      <button onClick={() => clipboard.copy()}>Copy</button>

      <Clipboard.RootProvider value={clipboard}>
        <Clipboard.Label>Copy this link</Clipboard.Label>
        <Clipboard.Control>
          <Clipboard.Input />
          <Clipboard.Trigger>
            <Clipboard.Indicator copied={
              <span>Copied!</span>
            }
            >
              <span>Copy</span>
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.RootProvider>
    </>
  )
}

import { Clipboard, useClipboard } from '@destyler-ui/solid/clipboard'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'

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

  return (
    <>
      <button onClick={() => clipboard().copy()}>Copy</button>

      <Clipboard.RootProvider value={clipboard}>
        <Clipboard.Label>Copy this link</Clipboard.Label>
        <Clipboard.Control>
          <Clipboard.Input />
          <Clipboard.Trigger>
            <Clipboard.Indicator copied={<CheckIcon />}>
              <ClipboardCopyIcon />
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Clipboard, useClipboard } from '@destyler-ui/svelte'

  const id = $props.id()
  const clipboard = useClipboard({ id, value: 'https://destyler.org' })
</script>

{#snippet copied()}
  <span>Copied!</span>
{/snippet}

<button type="button" onclick={() => clipboard().copy()}>Copy</button>
<Clipboard.RootProvider value={clipboard}>
  <Clipboard.Label>Copy this link</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator {copied}><span>Copy</span></Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.RootProvider>

API Reference

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; input: string; label: string; }>` The ids of the elements in the clipboard. Useful for composition.
`timeout`	`3000`	`number` The timeout for the copy operation
`value`	—	`string` The value to be copied to the clipboard

Emit	Event
`statusChange`	`[details: CopyStatusDetails]` The function to be called when the value is copied to the clipboard

Context

No serializable props or emits are declared for this part.

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`	—	`Partial<{ root: string; input: string; label: string; }>` The ids of the elements in the clipboard. Useful for composition.
`onStatusChange`	—	`(details: CopyStatusDetails) => void` The function to be called when the value is copied to the clipboard
`timeout`	`3000`	`number` The timeout for the copy operation
`value`	—	`string` The value to be copied to the clipboard

Context

Prop	Default	Type
`children*`	—	`(context: UseClipboardContext) => ReactNode`

Control

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`copied`	—	`null \| string \| number \| bigint \| false \| true \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| react82.ReactPortal \| Promise<string \| number \| bigint \| boolean \| react82.ReactPortal \| react82.ReactElement<unknown, string \| react82.JSXElementConstructor<any>> \| Iterable<react82.ReactNode> \| null \| undefined>`

Input

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseClipboardReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`ids`	—	`Partial<{ root: string; input: string; label: string; }>` The ids of the elements in the clipboard. Useful for composition.
`onStatusChange`	—	`(details: CopyStatusDetails) => void` The function to be called when the value is copied to the clipboard
`timeout`	`3000`	`number` The timeout for the copy operation
`value`	—	`string` The value to be copied to the clipboard

Context

Prop	Default	Type
`children*`	—	`(context: UseClipboardContext) => Element`

Control

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Indicator

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`copied`	—	`null \| number \| false \| true \| Node \| solid_js281.JSX.ArrayElement \| (string & {})`

Input

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.InputHTMLAttributes<HTMLInputElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.LabelHTMLAttributes<HTMLLabelElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UseClipboardReturn`
`asChild`	—	`(props: (userProps?: solid_js281.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Trigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

ValueText

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js281.JSX.HTMLAttributes<HTMLSpanElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`id`	—	`string`
`ids`	—	`Partial<{ root: string; input: string; label: string; }>` The ids of the elements in the clipboard. Useful for composition.
`onStatusChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").ClipboardCopyStatusDetails) => void` The function to be called when the value is copied to the clipboard
`timeout`	`3000`	`number` The timeout for the copy operation
`value`	—	`string` The value to be copied to the clipboard

Context

Prop	Default	Type
`render`	—	`Snippet<[UseClipboardContext]>`

Control

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Indicator

Prop	Default	Type
`asChild`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`
`copied`	—	`Snippet<[]> \| undefined`

Input

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>`
`children`	—	`Snippet<[]> \| undefined`

Label

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>`
`children`	—	`Snippet<[]> \| undefined`

Provider

No serializable props or emits are declared for this part.

RootProvider

Prop	Default	Type
`value*`	—	`UseClipboardReturn`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Trigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

ValueText

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>`
`children`	—	`Snippet<[]> \| undefined`