@patternfly/patternfly

--- id: Clipboard copy section: components cssPrefix: pf-v5-c-clipboard-copy ---## Examples ### Basic ```html <div class="pf-v5-c-clipboard-copy"> <div class="pf-v5-c-clipboard-copy__group"> <span class="pf-v5-c-form-control"> <input type="text" value="This is editable" id="basic-editable-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="basic-editable-copy-button" aria-labelledby="basic-editable-copy-button basic-editable-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> </div> <br /> <div class="pf-v5-c-clipboard-copy"> <div class="pf-v5-c-clipboard-copy__group"> <span class="pf-v5-c-form-control pf-m-readonly"> <input readonly type="text" value="This is read-only" id="basic-readonly-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="basic-readonly-copy-button" aria-labelledby="basic-readonly-copy-button basic-readonly-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> </div> ``` ### Expandable ```html <h4>Editable</h4> <div class="pf-v5-c-clipboard-copy"> <div class="pf-v5-c-clipboard-copy__group"> <button class="pf-v5-c-button pf-m-control" type="button" id="expandable-not-expanded-editable-toggle" aria-labelledby="expandable-not-expanded-editable-toggle expandable-not-expanded-editable-text-input" aria-controls="expandable-not-expanded-editable-content" > <div class="pf-v5-c-clipboard-copy__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </button> <span class="pf-v5-c-form-control"> <input type="text" value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion." id="expandable-not-expanded-editable-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="expandable-not-expanded-editable-copy-button" aria-labelledby="expandable-not-expanded-editable-copy-button expandable-not-expanded-editable-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-clipboard-copy__expandable-content" hidden id="expandable-not-expanded-editable-content" >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div> </div> <br /> <div class="pf-v5-c-clipboard-copy pf-m-expanded"> <div class="pf-v5-c-clipboard-copy__group"> <button class="pf-v5-c-button pf-m-control pf-m-expanded" type="button" id="expandable-expanded-editable-toggle" aria-labelledby="expandable-expanded-editable-toggle expandable-expanded-editable-text-input" aria-controls="expandable-expanded-editable-content" > <div class="pf-v5-c-clipboard-copy__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </button> <span class="pf-v5-c-form-control pf-m-readonly"> <input readonly type="text" value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion." id="expandable-expanded-editable-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="expandable-expanded-editable-copy-button" aria-labelledby="expandable-expanded-editable-copy-button expandable-expanded-editable-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-clipboard-copy__expandable-content" contenteditable="true" id="expandable-expanded-editable-content" >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div> </div> <br /> <h4>Read-only</h4> <div class="pf-v5-c-clipboard-copy"> <div class="pf-v5-c-clipboard-copy__group"> <button class="pf-v5-c-button pf-m-control" type="button" id="expandable-not-expanded-readonly-toggle" aria-labelledby="expandable-not-expanded-readonly-toggle expandable-not-expanded-readonly-text-input" aria-controls="expandable-not-expanded-readonly-content" > <div class="pf-v5-c-clipboard-copy__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </button> <span class="pf-v5-c-form-control pf-m-readonly"> <input readonly type="text" value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion." id="expandable-not-expanded-readonly-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="expandable-not-expanded-readonly-copy-button" aria-labelledby="expandable-not-expanded-readonly-copy-button expandable-not-expanded-readonly-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-clipboard-copy__expandable-content" hidden id="expandable-not-expanded-readonly-content" >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div> </div> <br /> <div class="pf-v5-c-clipboard-copy pf-m-expanded"> <div class="pf-v5-c-clipboard-copy__group"> <button class="pf-v5-c-button pf-m-control pf-m-expanded" type="button" id="expandable-expanded-readonly-toggle" aria-labelledby="expandable-expanded-readonly-toggle expandable-expanded-readonly-text-input" aria-controls="expandable-expanded-readonly-content" > <div class="pf-v5-c-clipboard-copy__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </button> <span class="pf-v5-c-form-control pf-m-readonly"> <input readonly type="text" value="This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion." id="expandable-expanded-readonly-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="expandable-expanded-readonly-copy-button" aria-labelledby="expandable-expanded-readonly-copy-button expandable-expanded-readonly-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-clipboard-copy__expandable-content" id="expandable-expanded-readonly-content" >This is an editable version of the copy to clipboard component that has an expandable section. Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting expansion.</div> </div> <br /> <h4>Code</h4> <div class="pf-v5-c-clipboard-copy"> <div class="pf-v5-c-clipboard-copy__group"> <button class="pf-v5-c-button pf-m-control" type="button" id="expandable-not-expanded-code-toggle" aria-labelledby="expandable-not-expanded-code-toggle expandable-not-expanded-code-text-input" aria-controls="expandable-not-expanded-code-content" > <div class="pf-v5-c-clipboard-copy__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </button> <span class="pf-v5-c-form-control"> <input dir="ltr" type="text" value="{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} " id="expandable-not-expanded-code-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="expandable-not-expanded-code-copy-button" aria-labelledby="expandable-not-expanded-code-copy-button expandable-not-expanded-code-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-clipboard-copy__expandable-content" hidden id="expandable-not-expanded-code-content" > <pre dir="ltr">{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} </pre> </div> </div> <br /> <div class="pf-v5-c-clipboard-copy pf-m-expanded"> <div class="pf-v5-c-clipboard-copy__group"> <button class="pf-v5-c-button pf-m-control pf-m-expanded" type="button" id="expandable-expanded-code-toggle" aria-labelledby="expandable-expanded-code-toggle expandable-expanded-code-text-input" aria-controls="expandable-expanded-code-content" > <div class="pf-v5-c-clipboard-copy__toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </div> </button> <span class="pf-v5-c-form-control pf-m-readonly"> <input readonly dir="ltr" type="text" value="{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} " id="expandable-expanded-code-text-input" aria-label="Copyable input" /> </span> <button class="pf-v5-c-button pf-m-control" type="button" aria-label="Copy to clipboard" id="expandable-expanded-code-copy-button" aria-labelledby="expandable-expanded-code-copy-button expandable-expanded-code-text-input" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </div> <div class="pf-v5-c-clipboard-copy__expandable-content" contenteditable="true" id="expandable-expanded-code-content" > <pre dir="ltr">{ "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }} </pre> </div> </div> ``` ### Inline compact ```html <div class="pf-v5-c-clipboard-copy pf-m-inline"> <span class="pf-v5-c-clipboard-copy__text">2.3.4-2-redhat</span> <span class="pf-v5-c-clipboard-copy__actions"> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Copy to clipboard" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </span> </span> </div> ``` ### Inline compact code ```html <div class="pf-v5-c-clipboard-copy pf-m-inline"> <code class="pf-v5-c-clipboard-copy__text pf-m-code">2.3.4-2-redhat</code> <span class="pf-v5-c-clipboard-copy__actions"> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Copy to clipboard" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </span> </span> </div> ``` ### Inline compact with additional action ```html <div class="pf-v5-c-clipboard-copy pf-m-inline"> <span class="pf-v5-c-clipboard-copy__text">2.3.4-2-redhat</span> <span class="pf-v5-c-clipboard-copy__actions"> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Copy to clipboard" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </span> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Run in web terminal" > <i class="fas fa-play" aria-hidden="true"></i> </button> </span> </span> </div> ``` ### Inline compact in sentence ```html <h4> <strong>Basic</strong> </h4>Lorem ipsum  <div class="pf-v5-c-clipboard-copy pf-m-inline"> <span class="pf-v5-c-clipboard-copy__text">2.3.4-2-redhat</span> <span class="pf-v5-c-clipboard-copy__actions"> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Copy to clipboard" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </span> </span> </div>  dolor sit amet. <br /> <br /> <h4> <strong>Long copy string</strong> </h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <div class="pf-v5-c-clipboard-copy pf-m-inline"> <span class="pf-v5-c-clipboard-copy__text" >https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</span> <span class="pf-v5-c-clipboard-copy__actions"> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Copy to clipboard" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </span> </span> </div> Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. <br /> <br /> <h4> <strong>Long copy string in block</strong> </h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  <div class="pf-v5-c-clipboard-copy pf-m-inline pf-m-block"> <span class="pf-v5-c-clipboard-copy__text" >https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890</span> <span class="pf-v5-c-clipboard-copy__actions"> <span class="pf-v5-c-clipboard-copy__actions-item"> <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="Copy to clipboard" > <i class="fas fa-copy" aria-hidden="true"></i> </button> </span> </span> </div> Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim. ``` ## Documentation ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-v5-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** | | `aria-label="[input label text]"` | `.pf-v5-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** | | `aria-hidden="true"` | `<i>` | Hides the icon from assistive technologies. | | `aria-controls="[id of expandable element]"` | `.pf-v5-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** | | `hidden` | `.pf-v5-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. | | `aria-labelledby="[id of button] [id of input label]"` | `.pf-v5-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v5-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** | | `.pf-v5-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** | | `.pf-v5-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. | | `.pf-v5-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. | | `.pf-v5-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. **Required** | | `.pf-v5-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. **Required** | | `.pf-v5-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** | | `.pf-m-inline` | `.pf-v5-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. | | `.pf-m-block` | `.pf-v5-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. | | `.pf-m-expanded` | `.pf-v5-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. | | `.pf-m-expanded` | `.pf-v5-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. | | `.pf-m-code` | `code.pf-v5-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |