Components
Input group
Input fields with attached leading, trailing, top, or bottom addons.
.ui-input-group wraps an .ui-input with [data-slot="input-group-addon"] elements. Position addons using data-align.
Default
Loading components…
<div class="ui-field"> <label data-slot="field-label" for="f-search">Search</label> <label class="ui-input-group"> <input class="ui-input" id="f-search" type="search" name="q" inputmode="search" placeholder="Search…" autocomplete="off" spellcheck="false" enterkeyhint="search" aria-describedby="f-search-hint" /> <span data-slot="input-group-addon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </span> <span data-slot="input-group-addon" data-align="inline-end"> <button class="ui-button" data-variant="ghost" data-size="icon-sm" type="submit" aria-label="Submit search" > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <line x1="40" y1="128" x2="216" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <polyline points="144 56 216 128 144 200" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button> </span> </label> <div data-slot="field-description"> <span data-slot="field-hint" id="f-search-hint">Search across every page in the docs.</span> </div></div><div class="ui-field"> <label data-slot="field-label" for="f-url">Website</label> <label class="ui-input-group"> <input class="ui-input" id="f-url" type="url" name="url" inputmode="url" required placeholder="https://zazz.sh" autocomplete="url" autocapitalize="off" spellcheck="false" enterkeyhint="go" aria-describedby="f-url-hint" /> <span data-slot="input-group-addon"> <span data-slot="input-group-text">https://</span> </span> <span data-slot="input-group-addon" data-align="inline-end"> <button class="ui-button" data-variant="primary" data-size="sm" type="submit">Apply</button> </span> </label> <div data-slot="field-description"> <span data-slot="field-hint" id="f-url-hint">Where people can find you online.</span> <span data-slot="field-error" role="alert">Enter a valid URL, e.g. https://zazz.sh.</span> </div></div><div class="ui-field"> <label data-slot="field-label" for="f-prompt">Prompt</label> <label class="ui-input-group"> <textarea id="f-prompt" class="ui-textarea" name="prompt" inputmode="text" placeholder="Ask anything…" aria-describedby="f-prompt-hint" ></textarea> <span data-slot="input-group-addon" data-align="block-end"> <button class="ui-button bg-background ml-auto" data-size="sm" type="submit"> <span>Send</span> <kbd>↵</kbd> </button> </span> </label> <div data-slot="field-description"> <span data-slot="field-hint" id="f-prompt-hint" >Enter to send · Shift + Enter for a new line.</span > </div></div>/** * input-group.css — Input group (.ui-input-group) * * @layer variables, components * @requires layers.css, _variables.css, fields.css, input.css, * textarea.css, button.css * @uses :focus-within — lifts shell ring/border as one field * @uses :has() — restore padding when addons absent; invalid text color * @uses data-align on [data-slot~="input-group-addon"] — inline-start/end, block-start/end * @tokens --ui-input-group-* (@layer variables) */@layer variables { :root { --ui-input-group-display: flex; --ui-input-group-wrap: wrap; --ui-input-group-align: center; --ui-input-group-gap: var(--step-1); --ui-input-group-inline-size: 100%; --ui-input-group-min-block-size: var(--ui-field-height); --ui-input-group-padding: 0; --ui-input-group-cursor: text; --ui-input-group-text-color: var(--muted-foreground); --ui-input-group-text-weight: var(--font-weight-strong); --ui-input-group-text-size: var(--font-size-sm); --ui-input-group-textarea-min-block-size: 3lh; --ui-input-group-textarea-padding-inline: var(--step-2); --ui-input-group-textarea-padding-block: var(--step-1_5); --ui-input-group-shadow: 0 0 transparent; }}@layer zazz.components { /* =========================================================================== INPUT GROUP — .ui-input-group (shadcn-style composition) - A single bordered shell that fuses a text control with addons (icons, text, kbd) and buttons. The nested control goes borderless/transparent so the group reads as one field; :focus-within lifts the whole shell. - Addons are placed AFTER the control in the markup (for predictable tab/focus order) and positioned with data-align: inline-start (default) · inline-end · block-start · block-end block-* span the full width on their own row — that's how a textarea grows a toolbar above or below it. - Composition: .ui-input-group > [.ui-input | .ui-textarea] + [data-slot~="input-group-addon"] where an addon may hold [data-slot~="input-group-text"], an <svg>, <kbd>, or .ui-button. - The shell is a <label> for click-to-focus, but it is NOT the field's label. Wrap it in a .ui-field with a real [data-slot~="field-label"][for] (and optional [data-slot~="field-hint"] / [data-slot~="field-error"]) so the control is named by visible text, never by a legend. - Shares the --ui-field-* tokens (height, radius, surface) defined in fields.css. =========================================================================== */ .ui-input-group { display: var(--ui-input-group-display); flex-wrap: var(--ui-input-group-wrap); align-items: var(--ui-input-group-align); gap: var(--ui-input-group-gap); inline-size: var(--ui-input-group-inline-size); min-block-size: var(--ui-input-group-min-block-size); padding: var(--ui-input-group-padding); /* The shell is a <label>: clicking a non-interactive addon focuses the nested control, so the whole field reads as one clickable target. */ cursor: var(--ui-input-group-cursor); color: var(--ui-field-foreground); background-color: var(--ui-field-background); border: 1px solid var(--ui-field-border); border-radius: var(--ui-field-radius); --_ring-offset-width: 0px; --_ring-width: 0px; --_ring: color-mix(in oklch, var(--ui-field-ring-color) var(--ring-opacity), transparent); box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)), var(--ui-input-group-shadow); outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset); transition: var(--default-transition); } .ui-input-group:hover { background-color: var(--ui-field-background--hover); border-color: var(--ui-field-border--hover); } .ui-input-group:focus-within { background-color: var(--ui-field-background--focus); border-color: var(--ui-field-border--focus); --_ring-offset-width: var(--ring-offset-width); --_ring-width: var(--ring-width); outline-color: transparent; } /* Nested control sheds its own chrome and fills the row */ .ui-input-group .ui-input, .ui-input-group .ui-textarea { flex: 1; min-inline-size: 0; background-color: transparent; border: none; border-radius: 0; outline: none; box-shadow: none; } .ui-input-group .ui-input { flex: 1; padding-inline: 0; &:is(:hover, :active, :focus) { background-color: transparent; } } /* Restore the control's own inline padding on whichever edge has no addon, so text never sits flush against the shell. An addon already supplies the spacing on its side; block-* addons take their own row and don't count here. (Default/no-data-align addons are inline-start.) */ .ui-input-group:not( :has( [data-slot~="input-group-addon"]:not([data-align]), [data-slot~="input-group-addon"][data-align="inline-start"] ) ) .ui-input { padding-inline-start: var(--ui-field-padding); } .ui-input-group:not(:has([data-slot~="input-group-addon"][data-align="inline-end"])) .ui-input { padding-inline-end: var(--ui-field-padding); } /* A textarea claims the full width; addons stack above/below via block-* */ .ui-input-group .ui-textarea { flex-basis: 100%; min-block-size: var(--ui-input-group-textarea-min-block-size); padding-inline: var(--ui-input-group-textarea-padding-inline); padding-block: var(--ui-input-group-textarea-padding-block); resize: none; } /* Addon — groups icons, text, kbd, or buttons together */ [data-slot~="input-group-addon"] { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: var(--step-1); color: var(--muted-foreground); white-space: nowrap; block-size: var(--ui-field-height); min-inline-size: var(--ui-field-height); padding-inline: var(--ui-field-addon-padding); } [data-slot~="input-group-addon"] > svg { inline-size: var(--ui-field-icon-size); block-size: var(--ui-field-icon-size); } /* Alignment — inline-start is the default (addon visually leads the control) */ [data-slot~="input-group-addon"]:not([data-align]), [data-slot~="input-group-addon"][data-align="inline-start"] { order: -1; } [data-slot~="input-group-addon"][data-align="inline-end"] { order: 1; } [data-slot~="input-group-addon"][data-align="block-start"] { order: -2; flex-basis: 100%; padding-block: var(--ui-field-addon-padding); align-items: flex-start; } [data-slot~="input-group-addon"][data-align="block-end"] { order: 2; flex-basis: 100%; padding-block: var(--ui-field-addon-padding); align-items: flex-end; } /* Text addon — units, protocols, @handles ("https://", "USD", "@user") */ [data-slot~="input-group-text"] { display: inline-flex; align-items: center; gap: var(--gap-xs); padding-inline: var(--ui-field-addon-padding); font-size: var(--ui-input-group-text-size); font-weight: var(--ui-input-group-text-weight); color: var(--ui-input-group-text-color); min-inline-size: max-content; } [data-slot~="input-group-text"] > svg { inline-size: var(--ui-field-icon-size); block-size: var(--ui-field-icon-size); } /* Buttons embedded in a group shrink to nest cleanly inside the shell */ .ui-input-group .ui-button { flex-shrink: 0; border-radius: var(--ui-field-button-radius); } :where(.ui-field:has(:user-invalid)) [data-slot~="input-group-text"] { --ui-input-group-text-color: var(--destructive); }}Password group
Wraps inputs in <ui-password> to provide a password visibility toggle:
Loading components…
<div class="ui-field"> <label data-slot="field-label" for="f-login-password">Password</label> <ui-password> <label class="ui-password-group"> <input class="ui-input" id="f-login-password" name="password" type="password" autocomplete="new-password" minlength="8" required placeholder="••••••••" aria-describedby="f-login-password-hint f-login-password-warning" /> <span data-slot="password-group-addon" data-align="inline-end"> <button class="ui-button" data-slot="password-group-toggle" id="f-login-password-toggle" data-variant="ghost" data-size="icon-sm" type="button" aria-pressed="false" aria-label="Show password" aria-describedby="f-login-password-warning" > <svg data-slot="password-group-icon password-group-icon-show" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" > <rect width="256" height="256" fill="none" /> <path d="M128,56C48,56,16,128,16,128s32,72,112,72,112-72,112-72S208,56,128,56Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <circle cx="128" cy="128" r="40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> <svg data-slot="password-group-icon password-group-icon-hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" aria-hidden="true" > <rect width="256" height="256" fill="none" /> <line x1="48" y1="40" x2="208" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <path d="M154.9,157.6A40,40,0,0,1,101,98.4" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <path d="M73.8,69.7C33.6,90.6,16,128,16,128s32,72,112,72a118.1,118.1,0,0,0,54.1-12.8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> <path d="M208.6,169.1C229.8,149.1,240,128,240,128S208,56,128,56a126,126,0,0,0-20.5,1.6" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </button> </span> </label> </ui-password> <div data-slot="field-description"> <span data-slot="field-hint" id="f-login-password-hint">Use eight or more characters.</span> <span data-slot="field-error" role="alert">Password must be at least 8 characters.</span> </div> <span class="sr-only" id="f-login-password-warning" >Warning: showing the password makes it visible to anyone near your screen.</span ></div>// primitives/password-group/password-group.js"use strict";/** * @fileoverview `<ui-password>`: HTML web component for password visibility. * @description Light-DOM custom element that adds show/hide behavior to a * standard password field. Wrap the existing `.password-group` markup: the * element finds the input and the `[data-slot~="password-group-toggle"]` button, flips the * input between `type="password"` and `type="text"` on click, and keeps * `aria-pressed` and `aria-label` in sync. The icon swap is pure CSS, driven * by `aria-pressed` (see _password-group.css). * * The revealed/hidden state is a signal (`base/signals.ts`): the click handler * is the input adapter, `resolveToggleState` is the pure derivation, and one * effect is the output adapter that writes `type`, `aria-pressed`, and * `aria-label` together. The effect also runs once on connect, so the toggle * self-corrects to match the input's actual starting type even if the * markup's static attributes drift from it. * * Without JavaScript the field degrades to a regular password input; the * toggle button simply does nothing. * * Configuration (attributes on `<ui-password>`): * - `data-label-show`: Toggle label while the password is hidden (default "Show password"). * - `data-label-hide`: Toggle label while the password is visible (default "Hide password"). * * @example * <ui-password> * <label class="password-group"> * <input class="input" type="password" autocomplete="current-password" /> * <span data-slot="password-group-addon" data-align="inline-end"> * <button class="button" data-slot="password-group-toggle" type="button" * aria-pressed="false" aria-label="Show password">…</button> * </span> * </label> * </ui-password> */import { effect, state } from "../../base/signals.js";import { ZazzElement, defineZazzElement } from "../../base/zazz-element.js";/** * @description Derives the input type, `aria-pressed`, and `aria-label` for a * given reveal state. Pure: the effect in `connectedCallback` is the only * place that writes it to the DOM. * * @param revealed - Whether the password is currently shown as plain text. * @param labelShow - Toggle label while hidden. * @param labelHide - Toggle label while revealed. * @returns The derived DOM state. * @private */function resolveToggleState(revealed, labelShow, labelHide) { return { type: revealed ? "text" : "password", ariaPressed: revealed ? "true" : "false", ariaLabel: revealed ? labelHide : labelShow, };}class UiPassword extends ZazzElement { setup(signal) { const input = this.querySelector('input[type="password"], input[type="text"]'); const toggle = this.querySelector('[data-slot~="password-group-toggle"]'); if (!(input instanceof HTMLInputElement) || !(toggle instanceof HTMLElement)) return; const revealed = state(input.type === "text"); toggle.addEventListener("click", () => revealed.set(!revealed.get()), { signal }); effect(() => { const labelShow = this.getAttribute("data-label-show") || "Show password"; const labelHide = this.getAttribute("data-label-hide") || "Hide password"; const next = resolveToggleState(revealed.get(), labelShow, labelHide); input.type = next.type; toggle.setAttribute("aria-pressed", next.ariaPressed); toggle.setAttribute("aria-label", next.ariaLabel); }, { signal }); }}defineZazzElement("ui-password", UiPassword);// resolveToggleState is exported for unit tests only: not part of the public API.export { UiPassword, resolveToggleState };/** * input-group.css — Input group (.ui-input-group) * * @layer variables, components * @requires layers.css, _variables.css, fields.css, input.css, * textarea.css, button.css * @uses :focus-within — lifts shell ring/border as one field * @uses :has() — restore padding when addons absent; invalid text color * @uses data-align on [data-slot~="input-group-addon"] — inline-start/end, block-start/end * @tokens --ui-input-group-* (@layer variables) */@layer variables { :root { --ui-input-group-display: flex; --ui-input-group-wrap: wrap; --ui-input-group-align: center; --ui-input-group-gap: var(--step-1); --ui-input-group-inline-size: 100%; --ui-input-group-min-block-size: var(--ui-field-height); --ui-input-group-padding: 0; --ui-input-group-cursor: text; --ui-input-group-text-color: var(--muted-foreground); --ui-input-group-text-weight: var(--font-weight-strong); --ui-input-group-text-size: var(--font-size-sm); --ui-input-group-textarea-min-block-size: 3lh; --ui-input-group-textarea-padding-inline: var(--step-2); --ui-input-group-textarea-padding-block: var(--step-1_5); --ui-input-group-shadow: 0 0 transparent; }}@layer zazz.components { /* =========================================================================== INPUT GROUP — .ui-input-group (shadcn-style composition) - A single bordered shell that fuses a text control with addons (icons, text, kbd) and buttons. The nested control goes borderless/transparent so the group reads as one field; :focus-within lifts the whole shell. - Addons are placed AFTER the control in the markup (for predictable tab/focus order) and positioned with data-align: inline-start (default) · inline-end · block-start · block-end block-* span the full width on their own row — that's how a textarea grows a toolbar above or below it. - Composition: .ui-input-group > [.ui-input | .ui-textarea] + [data-slot~="input-group-addon"] where an addon may hold [data-slot~="input-group-text"], an <svg>, <kbd>, or .ui-button. - The shell is a <label> for click-to-focus, but it is NOT the field's label. Wrap it in a .ui-field with a real [data-slot~="field-label"][for] (and optional [data-slot~="field-hint"] / [data-slot~="field-error"]) so the control is named by visible text, never by a legend. - Shares the --ui-field-* tokens (height, radius, surface) defined in fields.css. =========================================================================== */ .ui-input-group { display: var(--ui-input-group-display); flex-wrap: var(--ui-input-group-wrap); align-items: var(--ui-input-group-align); gap: var(--ui-input-group-gap); inline-size: var(--ui-input-group-inline-size); min-block-size: var(--ui-input-group-min-block-size); padding: var(--ui-input-group-padding); /* The shell is a <label>: clicking a non-interactive addon focuses the nested control, so the whole field reads as one clickable target. */ cursor: var(--ui-input-group-cursor); color: var(--ui-field-foreground); background-color: var(--ui-field-background); border: 1px solid var(--ui-field-border); border-radius: var(--ui-field-radius); --_ring-offset-width: 0px; --_ring-width: 0px; --_ring: color-mix(in oklch, var(--ui-field-ring-color) var(--ring-opacity), transparent); box-shadow: 0 0 0 var(--_ring-offset-width) var(--ring-offset-color), 0 0 0 calc(var(--_ring-offset-width) + var(--_ring-width)) var(--_ring, var(--ring)), var(--ui-input-group-shadow); outline: var(--outline-width) var(--outline-style) transparent; outline-offset: var(--outline-offset); transition: var(--default-transition); } .ui-input-group:hover { background-color: var(--ui-field-background--hover); border-color: var(--ui-field-border--hover); } .ui-input-group:focus-within { background-color: var(--ui-field-background--focus); border-color: var(--ui-field-border--focus); --_ring-offset-width: var(--ring-offset-width); --_ring-width: var(--ring-width); outline-color: transparent; } /* Nested control sheds its own chrome and fills the row */ .ui-input-group .ui-input, .ui-input-group .ui-textarea { flex: 1; min-inline-size: 0; background-color: transparent; border: none; border-radius: 0; outline: none; box-shadow: none; } .ui-input-group .ui-input { flex: 1; padding-inline: 0; &:is(:hover, :active, :focus) { background-color: transparent; } } /* Restore the control's own inline padding on whichever edge has no addon, so text never sits flush against the shell. An addon already supplies the spacing on its side; block-* addons take their own row and don't count here. (Default/no-data-align addons are inline-start.) */ .ui-input-group:not( :has( [data-slot~="input-group-addon"]:not([data-align]), [data-slot~="input-group-addon"][data-align="inline-start"] ) ) .ui-input { padding-inline-start: var(--ui-field-padding); } .ui-input-group:not(:has([data-slot~="input-group-addon"][data-align="inline-end"])) .ui-input { padding-inline-end: var(--ui-field-padding); } /* A textarea claims the full width; addons stack above/below via block-* */ .ui-input-group .ui-textarea { flex-basis: 100%; min-block-size: var(--ui-input-group-textarea-min-block-size); padding-inline: var(--ui-input-group-textarea-padding-inline); padding-block: var(--ui-input-group-textarea-padding-block); resize: none; } /* Addon — groups icons, text, kbd, or buttons together */ [data-slot~="input-group-addon"] { display: flex; align-items: center; justify-content: center; flex-shrink: 0; gap: var(--step-1); color: var(--muted-foreground); white-space: nowrap; block-size: var(--ui-field-height); min-inline-size: var(--ui-field-height); padding-inline: var(--ui-field-addon-padding); } [data-slot~="input-group-addon"] > svg { inline-size: var(--ui-field-icon-size); block-size: var(--ui-field-icon-size); } /* Alignment — inline-start is the default (addon visually leads the control) */ [data-slot~="input-group-addon"]:not([data-align]), [data-slot~="input-group-addon"][data-align="inline-start"] { order: -1; } [data-slot~="input-group-addon"][data-align="inline-end"] { order: 1; } [data-slot~="input-group-addon"][data-align="block-start"] { order: -2; flex-basis: 100%; padding-block: var(--ui-field-addon-padding); align-items: flex-start; } [data-slot~="input-group-addon"][data-align="block-end"] { order: 2; flex-basis: 100%; padding-block: var(--ui-field-addon-padding); align-items: flex-end; } /* Text addon — units, protocols, @handles ("https://", "USD", "@user") */ [data-slot~="input-group-text"] { display: inline-flex; align-items: center; gap: var(--gap-xs); padding-inline: var(--ui-field-addon-padding); font-size: var(--ui-input-group-text-size); font-weight: var(--ui-input-group-text-weight); color: var(--ui-input-group-text-color); min-inline-size: max-content; } [data-slot~="input-group-text"] > svg { inline-size: var(--ui-field-icon-size); block-size: var(--ui-field-icon-size); } /* Buttons embedded in a group shrink to nest cleanly inside the shell */ .ui-input-group .ui-button { flex-shrink: 0; border-radius: var(--ui-field-button-radius); } :where(.ui-field:has(:user-invalid)) [data-slot~="input-group-text"] { --ui-input-group-text-color: var(--destructive); }}API
| Attribute | Target | Values |
|---|---|---|
data-align | [data-slot="input-group-addon"] | inline-start, inline-end, block-start, block-end |