FieldFreev1.0.0

Forms that always show where you are: the label brightens with focus, help stays quiet, and errors arrive with a coral dot and a voice for screen readers. shadcn's Field, 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-field.json

Radixpnpm dlx shadcn@latest add https://beautiful-ui.dev/r/radix-nova/lumen-field.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

Validate billing email

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

Field orientation"vertical"
"vertical" | "horizontal" | "responsive"
responsive: side by side once the FieldGroup is 28rem wide.
Field data-invalid / data-disabled–
boolean
Marks the field (dims the label when disabled).
FieldError children / errors–
ReactNode / { message }[]
One message, or a list (duplicates dropped, as shadcn does). role=alert, coral dot, fades in.
FieldAside–
ReactNode
Beautiful UI: Optional, Locked or a count at the end of the label row.
FieldSeparator children–
ReactNode
A hairline with an optional mono caption.

Anatomy

Same parts and data-slots as shadcn's Field, plus FieldAside.
Base UI and Radix builds (the Label differs).
Holds any Lumen control: Input, Textarea, Input Group.

Fielddata-slot="field"
One field: label, control, description, error.
FieldLabeldata-slot="field-label"
The label; accent while the field has focus.
FieldDescriptiondata-slot="field-description"
Help text.
FieldErrordata-slot="field-error"
The announced error with the coral dot.
FieldGroup / FieldSet / FieldLegenddata-slot="field-group"
Grouping and headings.
FieldContent / FieldTitle / FieldSeparatordata-slot="field-content"
Layout helpers, as shadcn.
FieldAsidedata-slot="field-aside"
Beautiful UI: the end of the label row.

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: shadcn's Field in Lumen Halo, with FieldAside

Keyboard

Tab: Move through the fields in order; the focused one's label turns accent

More in Inputs

Input

Input Group

Textarea