InputGroup

Implemented Input

Input field with seamless prefix, suffix, and addon attachments.

Kumo reference: kumo-ui.com/components/input-group/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Suffix

.workers.dev

Show template

{% load wdj %}
<div class="w-72 max-w-full" x-data="{ status: 'success', timer: null }" @input="clearTimeout(timer); status = $event.target.value ? 'loading' : 'idle'; if (status === 'loading') timer = setTimeout(() => status = 'success', 1500)">
  {% wdj_component "wdj/components/input_group.html" %}
    <input name="group_suffix" id="group_suffix" value="wdj" maxlength="20" aria-label="Worker subdomain" class="min-w-0 flex-1 bg-transparent px-3 text-base text-kumo-default focus:outline-none">
    <span class="shrink-0 text-base text-kumo-subtle">.workers.dev</span>
    <span class="flex w-9 shrink-0 items-center justify-center" x-show="status !== 'idle'">
      <span x-show="status === 'loading'" x-cloak>{% include "wdj/components/loader.html" with size='sm' only %}</span>
      <span x-show="status === 'success'" class="text-kumo-success">{% wdj_icon 'circle-check' class='size-4' %}</span>
    </span>
  {% endwdj_component %}
</div>

Prefix

Website

https://

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input_group.html" with name="group_prefix" label="Website" prefix="https://" only %}
</div>

Both sides

Amount

$ USD

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input_group.html" with name="group_both_sides" label="Amount" prefix="$" suffix="USD" type="number" only %}
</div>

Leading icon

Show template

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

Trailing icon

Status

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input_group.html" with name="group_trailing_icon" label="Status" suffix_icon="check" only %}
</div>

Error

Domain

.example.com

Name is already in use.

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input_group.html" with name="group_error" label="Domain" suffix=".example.com" error="Name is already in use." only %}
</div>

Disabled

Managed hostname

.example.com

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input_group.html" with name="group_disabled" label="Managed hostname" value="production" suffix=".example.com" disabled=True only %}
</div>

Small

Small group

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% include "wdj/components/input_group.html" with name="group_small" label="Small group" prefix="@" size="sm" only %}
</div>

Attached button

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% wdj_component "wdj/components/input_group.html"  %}
<label class="wdj-sr-only" for="group_search">Search resources</label><input id="group_search" name="query" class="min-w-0 flex-1 bg-transparent px-3 text-base focus:outline-none" placeholder="Search resources">{% include "wdj/components/button.html" with label="Search" icon="search" class="rounded-none" only %}
{% endwdj_component %}
</div>

Attached select

Show template

{% load wdj %}
<div class="grid w-full max-w-lg gap-4">
{% wdj_component "wdj/components/input_group.html"  %}
<label class="wdj-sr-only" for="group_protocol">Protocol</label><select id="group_protocol" class="h-9 bg-kumo-fill px-2 text-base"><option>https://</option><option>http://</option></select><label class="wdj-sr-only" for="group_host">Hostname</label><input id="group_host" class="min-w-0 flex-1 bg-transparent px-3 text-base focus:outline-none" placeholder="example.com">
{% endwdj_component %}
</div>

Keyboard hint

⌘K

Show template

{% load wdj %}
{% wdj_component "wdj/components/input_group.html"  %}
<input id="audit-kbd-input" aria-label="Search projects" class="min-w-0 flex-1 bg-transparent px-3 text-base focus:outline-none" placeholder="Search projects"><kbd class="mr-2 rounded bg-kumo-fill px-1.5 text-xs">⌘K</kbd>
{% endwdj_component %}

Loading indicator

Show template

{% load wdj %}
{% wdj_component "wdj/components/input_group.html"  %}
<input aria-label="Loading search" class="min-w-0 flex-1 bg-transparent px-3 text-base" value="Searching…">{% include "wdj/components/loader.html" with size="sm" only %}
{% endwdj_component %}

Inline suffix

.example

Show template

{% load wdj %}
{% wdj_component "wdj/components/input_group.html"  %}
<input aria-label="Project address" class="min-w-0 flex-1 bg-transparent pl-3 text-base" value="demo"><span class="pr-3 text-base text-kumo-subtle">.example</span>
{% endwdj_component %}

Tooltip action

Show template

{% load wdj %}
{% wdj_component "wdj/components/input_group.html"  %}
<input aria-label="Documentation search" class="min-w-0 flex-1 bg-transparent px-3 text-base" placeholder="Search">{% wdj_component "wdj/components/tooltip.html" content="Search documentation" %}
{% include "wdj/components/button.html" with label="Search" size="sm" only %}
{% endwdj_component %}
{% endwdj_component %}

API Reference

Prop	Type	Default	Description
aria_label	string	unset	Aria label; pass the documented value shown in the examples.
name	string	unset	Name; pass the documented value shown in the examples.
value	string	unset	Value; pass the documented value shown in the examples.
type	string	text	Type; pass the documented value shown in the examples.
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.
prefix	string	unset	Prefix; pass the documented value shown in the examples.
suffix	string	unset	Suffix; pass the documented value shown in the examples.
prefix_icon	string	unset	Prefix icon; pass the documented value shown in the examples.
suffix_icon	string	unset	Suffix icon; pass the documented value shown in the examples.
placeholder	string	unset	Placeholder; pass the documented value shown in the examples.
size	string	base	Size; pass the documented value shown in the examples.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
disabled	bool	False	Disabled; pass the documented value shown in the examples.
readonly	bool	False	Readonly; pass the documented value shown in the examples.
required	bool	False	Required; pass the documented value shown in the examples.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
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.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract