Input

Text input with a label, help text, and validation state.

template 1 required 11 optional 4 slots 1 a11y rule

Reference Guide

Preview

name
type
python
input(name='gallery_text', label='Text Input', placeholder='Enter text...', type='text')

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.name = 'gallery_text'
        self.label = 'Text Input'
        self.placeholder = 'Enter text...'
        self.type = 'text'
my_template.html
django
{% load theme_components %}
{% theme_input name=name label=label placeholder=placeholder type=type %}

Props

NameTypeRequiredDefaultDescription
namestrrequired——
labelOptional[str]——
placeholderstr——
typestrtext—
field_idstr——
extra_attrsstr——
css_prefixstr——
attrsdict——
slot_labelstr——
slot_inputstr——
slot_help_textstr——
slot_errorstr——

Accessibility

RequirementElementAttributeValue
Label must reference input via for attributelabelfor(present)

Slots

slot_label slot_input slot_help_text slot_error
Source & styles
FilePathNotes
templatedjust_theming/components/input.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 3 of this component's classes at line 283, 289, 295. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_theming/catalogue.cssDefines 2 of this component's classes at line 64, 65. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
cssdjust_components/components.cssDefines 1 of this component's classes at line 997. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--background --foreground --input --muted-foreground --radius --ring
Template source — input.html
django
<div class="{{ css_prefix }}input-group {% if attrs.class %}{{ attrs.class }}{% endif %}">
    {% if slot_label %}
    {{ slot_label|safe }}
    {% elif label %}
    <label for="{{ field_id|default:name }}" class="{{ css_prefix }}input-label">{{ label }}</label>
    {% endif %}
    {% if slot_input %}
    {{ slot_input|safe }}
    {% else %}
    <input
        type="{{ type }}"
        name="{{ name }}"
        id="{{ field_id|default:name }}"
        placeholder="{{ placeholder }}"
        class="{{ css_prefix }}input"
        {% if attrs.value %}value="{{ attrs.value }}"{% endif %}
        {% if attrs.required %}required{% endif %}
        {% if attrs.disabled %}disabled{% endif %}
        {% if attrs.readonly %}readonly{% endif %}
        {{ extra_attrs }}
    />
    {% endif %}
    {% if slot_help_text %}
    <div class="{{ css_prefix }}input-help">{{ slot_help_text|safe }}</div>
    {% endif %}
    {% if slot_error %}
    <div class="{{ css_prefix }}input-error" role="alert">{{ slot_error|safe }}</div>
    {% endif %}
</div>