SensitiveInput
Implemented InputPassword/secret input with reveal toggle and copy button.
Kumo reference: kumo-ui.com/components/sensitive-input/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
API key
Show template
{% load wdj %}
<div class="grid w-80 max-w-full gap-4">
{% include "wdj/components/sensitive_input.html" with name="secret_api_key" label="API key" value="demo_sample_key" only %}
</div>Description
Synthetic example value.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/sensitive_input.html" with name="secret_description" label="Access token" value="demo_sample_token" description="Synthetic example value." only %}
</div>Error
Provide a value.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/sensitive_input.html" with name="secret_error" label="Secret" error="Provide a value." only %}
</div>Disabled
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/sensitive_input.html" with name="secret_disabled" label="Disabled secret" value="demo_sample_key" disabled=True only %}
</div>All sizes
Show template
{% load wdj %}
{% for size in audit_sizes %}{% include "wdj/components/sensitive_input.html" with id="audit-secret-size-"|add:size label=size value="synthetic-demo-value" size=size only %}{% endfor %}Controlled secret
Local demo value; no server write.
Show template
{% load wdj %}
<div x-data="{ value: 'demo-secret' }">{% include "wdj/components/sensitive_input.html" with id="audit-secret-controlled" label="Secret" attrs=audit_combo_model only %}<p class="mt-2 text-base text-kumo-subtle">Local demo value; no server write.</p></div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | unset | Name; pass the documented value shown in the examples. |
| value | string | unset | Value; 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. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| error | string | unset | Validation message; implies error styling and accessible error association. |
| placeholder | string | unset | Placeholder; pass the documented value shown in the examples. |
| size | string | base | Size; pass the documented value shown in the examples. |
| variant | string | component-specific | Variant; pass the documented value shown in the examples. |
| required | bool | False | Required; pass the documented value shown in the examples. |
| disabled | bool | False | Disabled; pass the documented value shown in the examples. |
| readonly | bool | False | Readonly; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| 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. |