Switch
Implemented InputOn/off toggle in three sizes.
Kumo reference: kumo-ui.com/components/switch/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Default
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_default" label="Notifications" only %}Checked
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_checked" label="Notifications" checked=True only %}Disabled
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_disabled" label="Disabled notifications" disabled=True only %}Disabled checked
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_disabled_checked" label="Managed notifications" disabled=True checked=True only %}Small
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_small" label="Small toggle" size="sm" only %}Large
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_large" label="Large toggle" size="lg" only %}Label first
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_label_first" label="Enable analytics" control_first=False only %}Description
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_description" label="Analytics" description="Measure anonymous usage." only %}Required
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_required" label="Accept settings" required=True only %}Error
Enable this setting to continue.
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_error" label="Required setting" error="Enable this setting to continue." only %}Pending
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with name="switch_pending" label="Saving setting" checked=True disabled=True transitioning=True only %}Controlled state
Show template
{% load wdj %}
<div x-data="{ enabled: false }" @change="enabled=$event.target.checked" class="grid gap-3">{% include "wdj/components/switch.html" with name="switch_controlled" label="Notifications" only %}<output class="text-base" x-text="enabled ? 'Enabled' : 'Disabled'" aria-live="polite">Disabled</output></div>Neutral variant and states
Show template
{% load wdj %}
{% include "wdj/components/switch.html" with label="Neutral off" variant="neutral" only %}{% include "wdj/components/switch.html" with label="Neutral on" variant="neutral" checked=True only %}{% include "wdj/components/switch.html" with label="Neutral disabled" variant="neutral" checked=True disabled=True only %}Switch group
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with kind="switch" legend="Notification methods" name="audit-switches" items=audit_choices hide_legend=False only %}Custom group legend
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with items=audit_choices name="audit-custom-switch-legend" kind="switch" legend="Notification preferences" legend_class="text-lg" only %}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. |
| checked | bool | False | Checked; 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. |
| error | string | unset | Validation message; implies error styling and accessible error association. |
| 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. |
| control_first | string | unset | Control first; pass the documented value shown in the examples. |
| transitioning | bool | False | Transitioning; 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. |