Clipboard

A component to copy text to the clipboard

Copy this link

Anatomy

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

Examples

Controlled

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

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.

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.

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.

Timeout

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

Value Text

Use Clipboard.ValueText to display the current clipboard value.

API Reference

Props

Root

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`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`		`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
`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

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

Control

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

Indicator

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`copied`		`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`

Input

Renders a <input> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

Label

Renders a <label> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

RootProvider

Renders a <div> element.

Prop	Default	Type
`value`		`UseClipboardReturn`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Trigger

Renders a <button> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

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

ValueText

Renders a <div> element.

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Context

API

Property	Type
`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