Label
Implemented FormForm field label, optional marker and tooltip.
Kumo reference: kumo-ui.com/components/label/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Default
More information about this field
Mai multe informații despre acest câmp
Show template
{% load wdj %}
<div class="flex max-w-full flex-col gap-4">
{% include "wdj/components/label.html" with label="Default label" only %}
{% include "wdj/components/label.html" with label="Optional label" optional=True only %}
{% include "wdj/components/label.html" with label="Label with tooltip" label_tooltip="More information about this field" only %}
{% include "wdj/components/label.html" with label="Etichetă tradusă" optional=True optional_label="(opțional)" only %}
{% include "wdj/components/label.html" with label="Etichetă cu explicație" label_tooltip="Mai multe informații despre acest câmp" tooltip_label="Mai multe informații" only %}
</div>Required
Show template
{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="label_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="label_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="label_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="label_error" label="Project name" error="Name is required." only %}
</div>Optional indicator
Show template
{% load wdj %}
<div>{% include "wdj/components/label.html" with label="Display name" optional=True for_id="audit-label-optional" only %}{% include "wdj/components/input.html" with id="audit-label-optional" aria_label="Display name" only %}</div>Rich label
Show template
{% load wdj %}
{% wdj_component "wdj/components/label.html" for_id="audit-rich-label" %}
<span>Project name</span>{% include "wdj/components/badge.html" with label="New" variant="secondary" only %}
{% endwdj_component %}{% include "wdj/components/input.html" with id="audit-rich-label" aria_label="Project name" only %}Mixed form fields
Show template
{% load wdj %}
<form data-demo-form class="flex flex-col gap-4">{% include "wdj/components/input.html" with id="audit-mixed-name" label="Name" required=True only %}{% include "wdj/components/textarea.html" with id="audit-mixed-notes" label="Notes" optional=True only %}{% include "wdj/components/button.html" with label="Validate form" type="submit" variant="primary" only %}</form>API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| slot | string / HTML slot | unset | Rich HTML supplied by the wdj_component block tag, rendered in an isolated context. |
| for_id | string | unset | For id; pass the documented value shown in the examples. |
| required | bool | False | Required; pass the documented value shown in the examples. |
| optional | bool | False | Optional; pass the documented value shown in the examples. |
| optional_label | string | unset | Optional label; pass the documented value shown in the examples. |
| required_label | string | unset | Required label; pass the documented value shown in the examples. |
| label_tooltip | string | unset | Label tooltip; pass the documented value shown in the examples. |
| tooltip_label | string | unset | Tooltip label; 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. |