Kappa / Clipboard Text

Workspace ID

Copy the ID, then paste it anywhere.

<script setup>
import { ClipboardText } from "@dicehub/kappa/components/clipboard-text";
</script>

<template>
  <ClipboardText.Root default-value="ws_01J9X4A8C2E6G0K4M8P2R6T0V4">
    <ClipboardText.Label>Workspace ID</ClipboardText.Label>
    <ClipboardText.Control>
      <ClipboardText.Input />
      <ClipboardText.Trigger aria-label="Copy workspace ID" />
    </ClipboardText.Control>
  </ClipboardText.Root>
</template>

Installation

Barrel

import {
  ClipboardText,
  ClipboardTextRoot,
  ClipboardTextRootProvider,
  ClipboardTextLabel,
  ClipboardTextControl,
  ClipboardTextInput,
  ClipboardTextTrigger,
  ClipboardTextIndicator,
  ClipboardTextValueText,
  ClipboardTextContext,
} from "@dicehub/kappa";

Granular

import {
  ClipboardText,
  ClipboardTextRoot,
  ClipboardTextRootProvider,
  ClipboardTextLabel,
  ClipboardTextControl,
  ClipboardTextInput,
  ClipboardTextTrigger,
  ClipboardTextIndicator,
  ClipboardTextValueText,
  ClipboardTextContext,
} from "@dicehub/kappa/components/clipboard-text";

Usage

A Control with a read-only Input and a copyTrigger covers the common case. The trigger swaps its icon to a check while the copied state is active.

Documentation URL

<script setup>
import { ClipboardText } from "@dicehub/kappa/components/clipboard-text";
</script>

<template>
  <ClipboardText.Root default-value="https://example.com/docs/components/clipboard-text">
    <ClipboardText.Label>Documentation URL</ClipboardText.Label>
    <ClipboardText.Control>
      <ClipboardText.Input />
      <ClipboardText.Trigger aria-label="Copy documentation URL" />
    </ClipboardText.Control>
  </ClipboardText.Root>
</template>

Composition

Typical part hierarchy

ClipboardText.Root
├── ClipboardText.Label
├── ClipboardText.Control
│   ├── ClipboardText.Input
│   └── ClipboardText.Trigger
│       └── ClipboardText.Indicator
└── ClipboardText.ValueText (alternative)

Ark UI owns the copy machine, the clipboard write, the feedback timeout, and status announcements. Kappa owns the compound API, the default icon swap, the dense control geometry, and semantic tokens.

Root owns the value and the copied feedback state.
Trigger copies on click and renders both icons through Indicator.
Indicator renders its default slot, or its copied slot while feedback is active.
ValueText shows the value inline when the bordered control does not fit.

See the Ark UI Clipboardguide for the primitive behavior contract.

<script setup>
import {
  ClipboardTextRoot,
  ClipboardTextControl,
  ClipboardTextInput,
  ClipboardTextTrigger,
  ClipboardTextIndicator,
} from "@dicehub/kappa/components/clipboard-text";
</script>

<template>
  <ClipboardTextRoot default-value="custom-marks">
    <ClipboardTextControl>
      <ClipboardTextInput />
      <ClipboardTextTrigger aria-label="Copy value">
        <ClipboardTextIndicator>
          <CopyIcon />
          <template #copied><CheckIcon /></template>
        </ClipboardTextIndicator>
      </ClipboardTextTrigger>
    </ClipboardTextControl>
  </ClipboardTextRoot>
</template>

Examples

Inline Value

ValueText composes the value and trigger without the bordered control.

demo_access_token_not_valid

ValueText composes inline without the bordered control.

<script setup>
import { ClipboardText } from "@dicehub/kappa/components/clipboard-text";
</script>

<template>
  <ClipboardText.Root default-value="demo_access_token_not_valid">
    <ClipboardText.ValueText />
    <ClipboardText.Trigger aria-label="Copy access token" />
  </ClipboardText.Root>
</template>

Feedback Timeout

timeout controls how long the copied feedback stays visible.

Short feedback window (800 ms)

<script setup>
import { ClipboardText } from "@dicehub/kappa/components/clipboard-text";
</script>

<template>
  <ClipboardText.Root default-value="token_short_feedback" :timeout="800">
    <ClipboardText.Label>Short feedback window (800 ms)</ClipboardText.Label>
    <ClipboardText.Control>
      <ClipboardText.Input />
      <ClipboardText.Trigger aria-label="Copy token" />
    </ClipboardText.Control>
  </ClipboardText.Root>
</template>

Controlled

Use v-model for the value and statusChange to react when a copy completes.

Run ID

Last copied: none

<script setup>
import { ref } from "vue";
import { ClipboardText } from "@dicehub/kappa/components/clipboard-text";

const runId = ref("run_01J9X7KQ2M4V8N6P3R5T7W9Y0B");
const lastCopied = ref("none");
</script>

<template>
  <ClipboardText.Root
    v-model="runId"
    @status-change="lastCopied = $event.copied ? runId : lastCopied"
  >
    <ClipboardText.Label>Run ID</ClipboardText.Label>
    <ClipboardText.Control>
      <ClipboardText.Input />
      <ClipboardText.Trigger aria-label="Copy run ID" />
    </ClipboardText.Control>
  </ClipboardText.Root>
  <p>Last copied: {{ lastCopied }}</p>
</template>

Accessibility

The trigger is a button; give it a concise accessible name that names the copied value.
The input stays read-only and selectable, so keyboard users can copy manually.
The copied state announces through the primitive's status channel and swaps the icon visually.
Keyboard focus remains visible on the trigger and within the control.

API Reference

ClipboardText.Root

Prop	Type	Default	Description
`modelValue`	`string`	`-`	Controlled value to copy; supports v-model.
`defaultValue`	`string`	`-`	Value to copy for uncontrolled use.
`timeout`	`number`	`3000`	Milliseconds the copied feedback state stays active.
`translations`	`IntlTranslations`	`localized`	Accessible names for the copy trigger and status announcements.
`id`	`string`	`generated`	Stable identifier for the clipboard state machine.
`ids`	`ClipboardTextRootProps['ids']`	`generated`	Overrides generated root, input, and label IDs.
`asChild`	`boolean`	`false`	Merges root behavior into the single child element.

Parts

Part	Element	Description
`ClipboardText.Label`	`label`	Names the field and focuses the value input on click.
`ClipboardText.Control`	`div`	Bordered box grouping the value input and copy trigger.
`ClipboardText.Input`	`input`	Read-only monospaced value; selectable for manual copying.
`ClipboardText.Trigger`	`button`	Copies on click; renders copy and check icons by default.
`ClipboardText.Indicator`	`div`	Switches between its default and copied slots on feedback.
`ClipboardText.ValueText`	`span`	Inline value display for compositions without the control box.
`ClipboardText.Context`	`renderless`	Exposes the clipboard API to its slot.
`ClipboardText.RootProvider`	`div`	Root driven by an external useClipboard machine.

Events

Event	Payload	Description
`statusChange`	`{ copied: boolean }`	Emitted when the copied feedback state flips.
`update:modelValue`	`string`	Emitted when the value changes; drives v-model.
`valueChange`	`{ value: string }`	Ark UI detail for value edits.

Exports

Export	Description
`ClipboardText`	Compound API exposing every named part.
`ClipboardTextRoot`	Unaugmented root state machine host.
`ClipboardTextTrigger`	Copy button with default icon swap.
`ClipboardTextIndicator`	Default/copied slot switch.
`ClipboardTextProps`	Public root props and Ark UI state contract.
`ClipboardTextEmits`	Root event contract.
`ClipboardCopyStatusDetails`	Payload for statusChange.
`useClipboard`	Ark UI machine hook for external state control.
`clipboardAnatomy`	Ark UI part anatomy metadata.