ClipboardText

Implemented Action

Read-only text field with a one-click copy-to-clipboard button.

Kumo reference: kumo-ui.com/components/clipboard-text/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Short value

0c239dd2

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="0c239dd2" only %}

Long value

resource-12345678-1234-1234-1234-123456789abc

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="resource-12345678-1234-1234-1234-123456789abc" only %}

Masked value

demo_********

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="demo_********" text_to_copy="demo_sample_value" only %}

Small

abc123

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="abc123" size="sm" only %}

Large

abc123

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="abc123" size="lg" only %}

Custom feedback

production-kv

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="production-kv" tooltip="Copy resource name" toast="Resource name copied" only %}

Alternate copied value

••••••••

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="••••••••" text_to_copy="synthetic-demo-key" tooltip="Copy the complete demo value" only %}

Tooltip label

workspace-demo

Show template

{% load wdj %}
{% include "wdj/components/clipboard_text.html" with text="workspace-demo" tooltip="Copy workspace identifier" only %}

API Reference

Prop	Type	Default	Description
text	string	unset	Text; pass the documented value shown in the examples.
text_to_copy	string	unset	Text to copy; pass the documented value shown in the examples.
size	string	lg	Size; pass the documented value shown in the examples.
label	string	unset	Visible accessible label. Supply an explicit aria-label via attrs when the control is bare.
tooltip	string	unset	Tooltip; pass the documented value shown in the examples.
toast	string	unset	Toast; pass the documented value shown in the examples.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract