Clipboard
A component to copy text to the clipboard
Anatomy
To set up the Clipboard correctly, you’ll need to understand its anatomy and how we name its parts.
Each part includes a
data-partattribute to help identify them in the DOM.
Examples
Learn how to use the Clipboard component in your project. Let’s take a look at
the most basic example:
import { CheckIcon, ClipboardCopyIcon } from 'lucide-react'
import { Clipboard } from '@ark-ui/react'
export const Basic = () => {
return (
<Clipboard.Root value="https://ark-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>
)
}
import { CheckIcon, ClipboardCopyIcon } from 'lucide-solid'
import { Clipboard } from '@ark-ui/solid'
export const Basic = () => {
return (
<Clipboard.Root value="https://ark-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 setup lang="ts">
import { Clipboard } from '@ark-ui/vue'
import { CheckIcon, ClipboardCopyIcon } from 'lucide-vue-next'
</script>
<template>
<Clipboard.Root value="https.//ark-ui.com">
<Clipboard.Label>Copy this link</Clipboard.Label>
<Clipboard.Control>
<Clipboard.Input />
<Clipboard.Trigger>
<Clipboard.Indicator>
<ClipboardCopyIcon />
<template #copied>
<CheckIcon />
</template>
</Clipboard.Indicator>
</Clipboard.Trigger>
</Clipboard.Control>
</Clipboard.Root>
</template>
API Reference
Root
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
idThe unique identifier of the machine. | string | |
idsThe ids of the elements in the clipboard. Useful for composition. | Partial<{ root: string; input: string; label: string }> | |
onStatusChangeThe function to be called when the value is copied to the clipboard | (details: CopyStatusDetails) => void | |
timeoutThe timeout for the copy operation | number | |
valueThe value to be copied to the clipboard | string |
Control
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Indicator
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean | |
copied | type ONLY_FOR_FORMAT =
| string
| number
| boolean
| ReactElement<any, string | JSXElementConstructor<any>>
| Iterable<ReactNode>
| ReactPortal |
Input
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Label
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Trigger
| Prop | Type | Default |
|---|---|---|
asChildRender as a different element type. | boolean |
Previous
CheckboxNext
Collapsible