Input
Preview
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'my_template.html
django
{% load theme_components %}
{% theme_input name=name label='Text Input' placeholder='Enter text...' type='text' %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| name | str | required | — |
| label | Optional[str] | — | |
| placeholder | str | — | |
| type | str | text | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_label | str | — | |
| slot_input | str | — | |
| slot_help_text | str | — | |
| slot_error | str | — |
Accessibility
| Requirement | Element | Attribute | Value |
|---|---|---|---|
| Label must reference input via for attribute | label | for | (present) |
Slots
slot_label slot_input slot_help_text slot_error
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/input.html | Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/. |
| css | djust_theming/components.css | Defines 3 of this component's classes at line 263, 269, 275. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
| css | djust_theming/catalogue.css | Defines 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. |
| css | djust_components/components.css | Defines 1 of this component's classes at line 971. 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="{{ name }}" class="{{ css_prefix }}input-label">{{ label }}</label>
{% endif %}
{% if slot_input %}
{{ slot_input|safe }}
{% else %}
<input
type="{{ type }}"
name="{{ name }}"
id="{{ 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>