search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Tailwind Clipboard method

    Tailwind CSS Clipboard

    Copy to clipboard feature for the latest Tailwind CSS. Let your users easily copy text or links with one click.

    Required ES init: Clipboard *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic example

    By adding button with data-twe-clipboard-init and data-twe-clipboard-target attribute you can easily make your text copyable.

    • HTML
    • javascript
            
                
          <div class="flex">
            <div class="relative mb-3 w-full" data-twe-input-wrapper-init>
              <input
                type="text"
                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
                id="copy-target"
                placeholder="Example label" />
              <label
                for="copy-target"
                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
                >Type here text to copy
              </label>
            </div>
            <div>
              <button
                id="copy-button"
                type="button"
                data-twe-clipboard-init
                data-twe-clipboard-target="#copy-target"
                data-twe-ripple-init
                data-twe-ripple-color="light"
                class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
                Copy
              </button>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Clipboard,
            Input,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Clipboard, Input, Ripple });
          
            
        

    Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

    Copy from element

    There is no difference if element is an input or just div element.

    Here is text to copy!
    • HTML
    • javascript
            
                
          <button
            id="copy-button"
            type="button"
            data-twe-clipboard-init
            data-twe-clipboard-target="#copy-target-2"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Copy
          </button>
    
          <div id="copy-target-2" class="mt-2">Here is text to copy!</div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Clipboard,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Clipboard, Ripple });
          
            
        

    Copy from data attribute

    By adding to target of copying data-twe-clipboard-text you can set text to copy instead of text from text content.

    Copy text from data-twe-attr despite of text content.
    • HTML
    • javascript
            
                
          <button
            id="copy-button"
            type="button"
            data-twe-clipboard-init
            data-twe-clipboard-target="#copy-target-3"
            data-twe-ripple-init
            data-twe-ripple-color="light"
            class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
            Copy
          </button>
    
          <div
            id="copy-target-3"
            data-twe-clipboard-text="This text is from data-twe-attr!"
            class="mt-2">
            Copy text from data-twe-attr despite of text content.
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Clipboard,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Clipboard, Ripple });
          
            
        

    Feedback example

    Listen for copied.twe.clipboard event to perform actions, such as displaying feedback message to users.

    Text copied!
    • HTML
    • javascript
    • umd
            
                
          <div
            id="container-example"
            class="fixed right-0 top-0 z-[2000] me-3 mt-[59px] hidden w-1/4 items-center rounded-lg bg-primary-100 px-6 py-4 text-base text-primary-700 data-[twe-alert-show]:inline-flex dark:bg-slate-900 dark:text-primary-500"
            role="alert"
            data-twe-alert-init
            data-twe-autohide="true"
            data-twe-delay="4000">
            Text copied!
          </div>
          <div class="flex w-full">
            <div class="relative mb-3 w-full" data-twe-input-wrapper-init>
              <input
                type="text"
                class="peer block min-h-[auto] w-full rounded border-0 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear focus:placeholder:opacity-100 peer-focus:text-primary data-[twe-input-state-active]:placeholder:opacity-100 motion-reduce:transition-none dark:text-white dark:placeholder:text-neutral-300 dark:autofill:shadow-autofill dark:peer-focus:text-primary [&:not([data-twe-input-placeholder-active])]:placeholder:opacity-0"
                id="copy-target-4"
                placeholder="Example label" />
              <label
                for="copy-target"
                class="pointer-events-none absolute left-3 top-0 mb-0 max-w-[90%] origin-[0_0] truncate pt-[0.37rem] leading-[1.6] text-neutral-500 transition-all duration-200 ease-out peer-focus:-translate-y-[0.9rem] peer-focus:scale-[0.8] peer-focus:text-primary peer-data-[twe-input-state-active]:-translate-y-[0.9rem] peer-data-[twe-input-state-active]:scale-[0.8] motion-reduce:transition-none dark:text-neutral-400 dark:peer-focus:text-primary"
                >Type here text to copy
              </label>
            </div>
            <div>
              <button
                id="myExample"
                type="button"
                data-twe-clipboard-init
                data-twe-clipboard-target="#copy-target-4"
                data-twe-ripple-init
                data-twe-ripple-color="light"
                class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
                Copy
              </button>
            </div>
          </div>
          
            
        
            
                
          // Initialization for ES Users
          import {
            Alert,
            Clipboard,
            Input,
            Ripple,
            initTWE,
          } from "tw-elements";
          
          initTWE({ Alert, Clipboard, Input, Ripple });
    
          const myExample = document.getElementById("myExample");
          const alertInstance = Alert.getInstance(
            document.getElementById("container-example")
          );
    
          myExample.addEventListener("copied.twe.clipboard", () => {
            myExample.innerText = "Copied!";
            alertInstance.show();
    
            setTimeout(() => {
              myExample.innerText = "COPY";
            }, 4000);
          });
          
            
        
            
                
          const myExample = document.getElementById("myExample");
          const alertInstance = twe.Alert.getInstance(
            document.getElementById("container-example")
          );
    
          myExample.addEventListener("copied.twe.clipboard", () => {
            myExample.innerText = "Copied!";
            alertInstance.show();
    
            setTimeout(() => {
              myExample.innerText = "COPY";
            }, 4000);
          });
          
            
        

    Related resources

    Buttons Button group Forms Popovers
    • Basic example
    • Copy from element
    • Copy from data attribute
    • Feedback example
    • Related resources

    Tailwind Clipboard method - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { Clipboard, initTWE } from "tw-elements";
            initTWE({ Clipboard });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Simply add data-twe-clipboard-init attribute to the button to initialize the clipboard component. For ES format, you must first import and call the initTWE method.

    • HTML
            
                
            <button
              id="copy-button"
              type="button"
              data-twe-clipboard-init
              data-twe-clipboard-target="#copy-target"
              data-twe-ripple-init
              data-twe-ripple-color="light"
              class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-primary-3 transition duration-150 ease-in-out hover:bg-primary-accent-300 hover:shadow-primary-2 focus:bg-primary-accent-300 focus:shadow-primary-2 focus:outline-none focus:ring-0 active:bg-primary-600 active:shadow-primary-2 dark:shadow-black/30 dark:hover:shadow-dark-strong dark:focus:shadow-dark-strong dark:active:shadow-dark-strong">
              Copy
            </button>
            
            
        

    Via JavaScript

    • javascript
    • umd
            
                
            const myClipboard = new Clipboard(document.getElementById('clipboard'), options);
            
            
        
            
                
            const myClipboard = new twe.Clipboard(document.getElementById('clipboard'), options)
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-clipboard-target="".

    Name Type Default Description
    clipboardTarget Null / String null Points an element from which you will copy text.

    Methods

    Method Description Example
    dispose Manually deletes an instance of clipboard. myClipboard.dispose()
    getInstance Static method which allows you to get the clipboard instance associated to a DOM element. Clipboard.getInstance(myClipboardEl)
    getOrCreateInstance Static method which returns the clipboard instance associated to a DOM element or create a new one in case it wasn't initialized. Clipboard.getOrCreateInstance(myClipboardEl)
    • javascript
    • umd
            
                
            const myClipboardEl = document.getElementById('myClipboard')
            const clipboard = new Clipboard(myClipboardEl)
            clipboard.dispose()
            
            
        
            
                
            const myClipboardEl = document.getElementById('myClipboard')
            const clipboard = new twe.Clipboard(myClipboardEl)
            clipboard.dispose()
            
            
        

    Events

    Event type Description
    copied.twe.clipboard This event fires immediately after copying text.
    • JavaScript
            
                
            const myClipboardEl = document.getElementById('myClipboard')
            myClipboardEl.addEventListener('copied.twe.clipboard', function (e) {
                // do something...
            })
            
            
        
    • Import
    • Usage
    • Options
    • Methods
    • Events
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO