Clipboard

A component for copying text or content to the user's clipboard.

Label

Anatomy

Usage

<script>
  import {Clipboard} from 'ui-ingredients';
  import {CheckIcon, Copy01Icon} from '$lib/icons';
</script>

<Clipboard.Root value="pass your value">
  <Clipboard.Label>Label</Clipboard.Label>
  <Clipboard.Control>
    <Clipboard.Input />
    <Clipboard.Trigger>
      <Clipboard.Indicator>
        {#snippet children(ctx)}
          {#if ctx.copied}
            <Copy01Icon />
          {:else}
            <CheckIcon />
          {/if}
        {/snippet}
      </Clipboard.Indicator>
    </Clipboard.Trigger>
  </Clipboard.Control>
</Clipboard.Root>

API Reference

Root

Prop	Default	Description
`defaultValue`		`string` 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` The unique identifier of the machine.
`ids`		`{ 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
`onValueChange`		`(details: ValueChangeDetails) => void` The function to be called when the value changes
`timeout`	`3000`	`number` The timeout for the copy operation
`value`		`string` The controlled value of the clipboard
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-copied`	Present when copied state is true
`data-part`	root
`data-scope`	clipboard

Control

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-copied`	Present when copied state is true
`data-part`	control
`data-scope`	clipboard

Indicator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Input

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

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

Label

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-copied`	Present when copied state is true
`data-part`	label
`data-scope`	clipboard

Trigger

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-copied`	Present when copied state is true
`data-part`	trigger
`data-scope`	clipboard