Input

{% load wdj %}
<div class="inline-flex max-w-full">
{% include "wdj/components/input.html" with name="input_basic" label="Email" type="email" placeholder="you@example.com" description="We'll never share your email" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_label" label="Username" placeholder="Choose a username" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_description" label="Email" type="email" description="Use your work email." only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_required" label="Project name" required=True only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_disabled" label="Disabled field" value="Locked" disabled=True only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_read_only" label="Resource ID" value="demo-123" readonly=True only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_error" label="Email" value="invalid" error="Enter a valid email." only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_leading_icon" label="Search" leading_icon="search" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_trailing_icon" label="Verified value" trailing_icon="check" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_password" label="Password" type="password" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_number" label="Concurrency" type="number" min=0 max=100 value=0 only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_clearable" label="Search query" value="edge worker" clearable=True only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_small" label="Small field" size="sm" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_large" label="Large field" size="lg" only %}
</div>

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input.html" with name="input_extra_small" label="Compact field" size="xs" only %}
</div>

{% load wdj %}
{% include "wdj/components/input.html" with id="audit-input-optional-field" name="workspace" optional=True label="Workspace name" only %}

{% load wdj %}
{% include "wdj/components/input.html" with id="audit-input-label-tooltip" name="workspace" label_tooltip="Use the name shown to other team members." label="Workspace name" only %}

{% load wdj %}
{% include "wdj/components/input.html" with id="audit-input-bare-error-field" name="workspace" error="This value is unavailable." aria_label="Workspace name" label="" only %}

{% load wdj %}
{% include "wdj/components/input.html" with id="audit-input-password-manager-isolation" name="workspace" type="password" attrs=audit_password_attrs label="Workspace name" only %}

{% load wdj %}
<div x-data="{ name: 'Demo' }">{% include "wdj/components/input.html" with id="audit-controlled-input" label="Workspace" attrs=audit_input_model only %}<p class="mt-2 text-base" x-text="name"></p></div>