Input GroupFreev1.0.0

Everything a field needs to say, said inside the field: a tinted prefix, a key cap, a live check that ticks, then draws its tick, and a meter that counts in cells. shadcn's InputGroup, cut from Lumen glass.

Built on shadcn/ui

.md

Add to your project

Base UIpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/lumen-input-group.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-input-group.json

Free, no account or key. Use the command for your project's primitives: a radix-*, new-york or default style in components.json is Radix, a base-* style is Base UI. With the @beautiful-ui registry added, @beautiful-ui/<name> picks for you.

Preview

Address prefixlumen.app/ on the tinted mono strip.

Status wordsCHECKING and AVAILABLE beside the glyphs.

Customize

Try Lumen in your brand. The preview follows on every page; copy the CSS when it's right.

Accent

Corners

Font

/* Lumen as drawn: nothing to change. */

Props

InputGroupAddon align"inline-start"
"inline-start" | "inline-end" | "block-start" | "block-end"
Where it sits; text (InputGroupText) at the start goes on the tinted mono strip, icons stay bare.
InputGroupStatus status–
"checking" | "ok" | "error" | null
Beautiful UI: ticker and CHECKING, the check drawing in and AVAILABLE, or !; announced; success and error cues.
InputGroupStatus labels–
{ checking?, ok?, error? }: { word?, said? }
The visible word and the announcement per status ('' hides the word).
InputGroupCount length / limit / cells— / — / 20
number / number / number
Beautiful UI: the cell meter and count; amber from 90%, coral past the limit.
InputGroupButton variant / size"ghost" / "xs"
Lumen Button variant / "xs" | "sm" | "icon-xs" | "icon-sm"
A Lumen Button sized for the well.

Anatomy

Same parts and data-slots as shadcn's InputGroup, plus InputGroupStatus and InputGroupCount.
Base UI and Radix builds.
Built from Lumen Input, Textarea and Button.
Plays success and error cues through beautiful-ui-sound.

InputGroupdata-slot="input-group"
The well around the control and its addons.
InputGroupAddondata-slot="input-group-addon"
Before, after, above or below the control.
InputGroupTextdata-slot="input-group-text"
A prefix or unit.
InputGroupInput / InputGroupTextareadata-slot="input-group-control"
The control, giving its well to the group.
InputGroupButtondata-slot="button"
A Lumen Button sized for the well.
InputGroupStatusdata-slot="input-group-status"
Beautiful UI: the live check.
InputGroupCountdata-slot="input-group-count"
Beautiful UI: the cell meter.

Part of

This is free. The full Lumen Halo has 120 more pieces.See the theme

Changelog

v1.0.0 · 2026-09-29All 1 entries

v1.0.0 · 2026-09-29
First release: the Glass Input's prefix, status and the Glass Textarea's meter rebuilt as shadcn's InputGroup

Keyboard

Tab: Focus the control, then any button in an addon

More in Inputs

Input

Textarea

Field