Qwik clipboard - Flowbite

Use the clipboard component to copy text, data or lines of code to the clipboard with a single click based on various styles and examples coded with Tailwind CSS and Flowbite

The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.

These components are built with Tailwind CSS and Flowbite Qwik and can be found on the internet on websites such as Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations.

Import the component from flowbite-qwik to use the clipboard element :

import { Clipboard } from "flowbite-qwik"

Default copy to clipboard

Use this example to copy the content of an input text field by clicking on a button and update the button text.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Clipboard, Input } from 'flowbite-qwik'

export default component$(() => {
  const inputValue = useSignal('')
  return (
    <>
      <div class="flex max-w-80 gap-3 pt-8">
        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="block w-full" />
        <Clipboard valueToCopy="npm install flowbite-qwik" label="Copy" class="h-full" />
      </div>
    </>
  )
})

Input with copy button

This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Clipboard, Input } from 'flowbite-qwik'

export default component$(() => {
  const inputValue = useSignal('')
  return (
    <div class="grid w-full max-w-64 pt-8">
      <div class="relative">
        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="col-span-6 block w-full" />

        <Clipboard.WithIcon valueToCopy="npm install flowbite-qwik" class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />
      </div>
    </div>
  )
})

Copy button with text

Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Clipboard, Input } from 'flowbite-qwik'

export default component$(() => {
  const inputValue = useSignal('')
  return (
    <div class="grid w-full max-w-80 pt-8">
      <div class="relative">
        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="col-span-6 block w-full" />

        <Clipboard.WithIconText valueToCopy="npm install flowbite-qwik" class="absolute end-2 top-1/2 inline-flex -translate-y-1/2" />
      </div>
    </div>
  )
})

Custom Tooltip

Use the props `tooltipCopyLabel` and `tooltipCopiedLabel` to customize the tooltip labels of the Clipboard component.

tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Clipboard, Input } from 'flowbite-qwik'

export default component$(() => {
  const inputValue = useSignal('')
  return (
    <>
      <div class="flex max-w-80 gap-3 pt-8">
        <Input placeholder="npm install flowbite-qwik" bind:value={inputValue} disabled readOnly class="block w-full" />
        <Clipboard
          valueToCopy="npm install flowbite-qwik"
          label="Copy"
          class="h-full"
          tooltipCopiedLabel="It's copied"
          tooltipCopyLabel="Copy that"
        />
      </div>
    </>
  )
})