Open-source "copy to clipboard" components built with Tailwind CSS
Tags: tailwindcss, flowbite, webdev, opensource
Published: 2024-02-16 16:48:22

The [copy to clipboard component](https://flowbite.com/docs/components/clipboard/) 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.

[![Tailwind CSS Copy to Clibpoard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/33khc2zdcfk5y577uywa.png)](https://flowbite.com/docs/components/clipboard/)

Use cases for websites can be found in the examples below and they include copying code installation commands, API keys, URLs, addresses, contact details, sharing course URLs inside a modal and more. 

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

## Default copy to clipboard

Make sure that you add the `data-copy-to-clipboard-target="elementID"` data attribute to the trigger element (ie. the button) to initialize the JS behavior where the `elementID` is the ID of the element where the source text can be found (such as input field).

Use this example to copy the content of an input text field by clicking on a button and update the button text by applying the JavaScript code from the tab below based on the `updateOnCopyCallback()` function callback from the Flowbite JS API.

[![Tailwind CSS Copy to Clipboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vlawkp2hrpfhh712mgb2.png)](https://flowbite.com/docs/components/clipboard/#default-copy-to-clipboard)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#default-copy-to-clipboard)

## 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.

If you also want to update the text inside the tooltip and the icon, then you need to apply the JavaScript code based on the `updateOnCopyCallback()` function callback from the Flowbite JS API.

[![Tailwind CSS Copy to Clipboard with button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/msoqfov5yjt4gbfjz9yk.png)](https://flowbite.com/docs/components/clipboard/#input-with-copy-button)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#input-with-copy-button)

## 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. Make sure that you also apply the custom JavaScript code below to enable the success and default message states.

[![Tailwind CSS Copy to Clipboard with button text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xg27259aa6c5rbrnqk6t.png)](https://flowbite.com/docs/components/clipboard/#copy-button-with-text)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#copy-button-with-text)

## Input group with copy

This example can be used to show a copy to clipboard button inside an input group which has a label positioned inside the input field. The icon inside the button will switch to a success state if you also apply the custom JavaScript code below.

[![Tailwind CSS Input Group with copy button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dehk3uv87hbkrgy5x4zs.png)](https://flowbite.com/docs/components/clipboard/#input-group-with-copy)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#input-group-with-copy)

## URL shortener input group

Use this example to copy a shortened URL to the clipboard by clicking on a button with an icon positioned inside the input field and also show a tooltip with a message when the text has been copied.

[![Tailwind CSS URL shortener](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49usw2n6juxk90mqxx0t.png)](https://flowbite.com/docs/components/clipboard/#url-shortener-input-group)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#url-shortener-input-group)

## Copy source code block

This example can be used to copy and paste code inside a `<pre>` and `<code>` block by clicking on a button with an icon position inside the block and also show a tooltip with a message when the text has been copied.

You need to add an extra `data-copy-to-clipboard-content-type="innerHTML"` data attribute to the trigger element (ie. the button) to specify that the content that is to be copied is from the `innerHTML` of the target element (ie. the code block). 

You also need to add the `data-copy-to-clipboard-html-entities="true"` option to the trigger element so that the copied text will be decoded from HTML entities to plain text that will work inside your code editor.

[![Tailwind CSS Copy Code Block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zdhdcxlvsraj60mihv.png)](https://flowbite.com/docs/components/clipboard/#copy-source-code-block)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#copy-source-code-block)

## Card with API keys

Use this example to show multiple input field elements that have the copy to clipboard button inside a card component for more complex applications where you need to copy API keys, account IDs and more.

Make sure that you also apply the custom JavaScript code with the function callback to enable the success and default message states for each input field and copy button.

[![Tailwind CSS Copy to Clipboard API Keys](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4t0at5erj71459g1uai.png)](https://flowbite.com/docs/components/clipboard/#card-with-api-keys)

- [Source code and examples](https://flowbite.com/docs/components/clipboard/#card-with-api-keys)

## Copy contact details

This example can be used to copy the text content (ie. contact details) inside of the `<address>` field by clicking on the copy to clipboard button positioned inside of the address card.

Make sure that you set the `data-copy-to-clipboard-content-type="textContent"` data attribute to the trigger element (ie. the button) to specify the source of the content that is to be copied.

[![Tailwind CSS Copy contact details](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omild8lxpjd517snmujg.png)](https://flowbite.com/docs/components/clipboard/#copy-contact-details)

- [Source code and examples](https://flowbite.com/docs/components/clipboard/#copy-contact-details)

## Copy button with modal

Use this example to show an input field where you can copy the URL of the current page and also show a modal with the copied URL when the copy button is clicked.

[![Tailwind CSS Copy button with modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fjb4pww7o6ocef0ua5mw.png)](https://flowbite.com/docs/components/clipboard/#copy-button-with-modal)

- [Source code and example](https://flowbite.com/docs/components/clipboard/#copy-button-with-modal)

## JavaScript behaviour

Use the **CopyClipboard** object from the [Flowbite JS API](https://flowbite.com/docs/components/clipboard/#javascript-behaviour) to create a component with a trigger element (ie. an input field, code blocks, address tag) and target element (ie. button or text) where the content of the target element is copied to the clipboard when the trigger element is clicked.

## Credits

These components were built by the [open-source community from Flowbite](https://github.com/themesberg/flowbite) and couldn't exist with the awesome [Tailwind CSS framework](https://tailwindcss.com/) and [Flowbite Icons](https://flowbite.com/icons/).