Usage
import { Clipboard } from "@chakra-ui/react"<Clipboard.Root>
<Clipboard.Trigger>
<Clipboard.CopyText />
<Clipboard.Indicator />
</Clipboard.Trigger>
<Clipboard.Input />
</Clipboard.Root>Examples
Button
Use the Clipboard.Trigger component to create a copy button.
Input
Use the Clipboard.Input component to create a copy input.
Timeout
Use the timeout prop to change the duration of the copy message.
Link Appearance
Here's an example that combines the Clipboard.Trigger and
Clipboard.ValueText components to create a link appearance.
Store
Alternatively, you can use the useClipboard hook to create a custom component.
Props
Root
| Prop | Default | Type |
|---|---|---|
timeout | 3000 | numberThe timeout for the copy operation |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
defaultValue | stringThe initial value to be copied to the clipboard when rendered. Use when you don't need to control the value of the clipboard. | |
id | stringThe 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) => voidThe function to be called when the value is copied to the clipboard | |
onValueChange | (details: ValueChangeDetails) => voidThe function to be called when the value changes | |
value | stringThe controlled value of the clipboard |
Explorer
Explore the Clipboard component parts interactively. Click on parts in the
sidebar to highlight them in the preview.
Component Anatomy
Hover to highlight, click to select parts
root
control
trigger
indicator
input
label
valueText