Field
Implemented InputLabel + description + error wrapper. Built into each control.
Kumo reference: kumo-ui.com/registry/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Default
Compose any control inside a field.
Show template
{% load wdj %}
<div class="w-full max-w-lg">
{% wdj_component "wdj/components/field.html" id="field_custom" label="Custom control" description="Compose any control inside a field." %}
<input id="field_custom" name="field_custom" aria-describedby="field_custom-description" class="h-9 rounded-lg bg-kumo-control px-3 text-base ring-1 ring-kumo-line focus:outline-none focus:ring-2 focus:ring-kumo-focus">
{% endwdj_component %}
</div>Required
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="field_required" label="Project name" required=True only %}
</div>Description
Use a unique name.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="field_description" label="Project name" description="Use a unique name." only %}
</div>Tooltip
Used in resource URLs.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="field_tooltip" label="Project name" label_tooltip="Used in resource URLs." only %}
</div>Error
Name is required.
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="field_error" label="Project name" error="Name is required." only %}
</div>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| 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. |
| required | bool | False | Required; pass the documented value shown in the examples. |
| slot | string / HTML slot | unset | Rich HTML supplied by the wdj_component block tag, rendered in an isolated context. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| class | string | "" | Class; pass the documented value shown in the examples. |