---
title: useClipboard
description: "`useClipboard` is a custom hook that performs the operation of copying a value to the clipboard."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-clipboard
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-useclipboard--basic
---

```tsx
const { onCopy, value, setValue, copied } = useClipboard()

return (
  <HStack>
    <Input
      placeholder="Text to be copied..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
    <Button disabled={!value} onClick={onCopy}>
      {copied ? "Copied" : "Copy"}
    </Button>
  </HStack>
)
```

## Usage

```tsx
import { useClipboard } from "@yamada-ui/react"
```

```tsx
import { useClipboard } from "@/components/ui"
```

```tsx
import { useClipboard } from "@workspaces/ui"
```

```tsx
const { onCopy, value, setValue, copied } = useClipboard("initial value")
```

### Using Initial Values

```tsx
const { onCopy, value, setValue, copied } = useClipboard("initial value")

return (
  <HStack>
    <Input
      placeholder="text to be copied..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
    <Button disabled={!value} onClick={onCopy}>
      {copied ? "Copied" : "Copy"}
    </Button>
  </HStack>
)
```

### Change Timeout

To change the timeout, set a number(milliseconds) to the second argument. The default is `1500`.

```tsx
const { onCopy, value, setValue, copied } = useClipboard("", 5000)

return (
  <HStack>
    <Input
      placeholder="text to be copied..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
    <Button disabled={!value} onClick={onCopy}>
      {copied ? "Copied" : "Copy"}
    </Button>
  </HStack>
)
```

### Copy the Specified Value

```tsx
const { onCopy, copied } = useClipboard()

const value = "Read-Only Value"

return (
  <HStack>
    <Input readOnly value={value} />
    <Button onClick={() => onCopy(value)}>{copied ? "Copied" : "Copy"}</Button>
  </HStack>
)
```