SUSupaUI

Forms

FieldGroup

Form field cluster — pixel label / italic hint / control / pixel-bang error. Vertical or inline.

Install

bash
npx shadcn@latest add https://supaui.dev/r/field-group.json

Stacked (default)

We'll send a single confirmation.

With InlineError

Handles cannot contain spaces.

Inline

API

  • FieldGroup.inline — labels + control on one row from the sm breakpoint up.
  • FieldGroup.error — toggles label tone to danger via cascade. Pair with aria-invalid on the control + an InlineError child.
  • FieldGroupLabel.required — appends a pixel * in the accent strong tone.
  • FieldGroupHint — Source Serif italic helper text.
  • InlineError — pixel ! glyph + danger text in pixel mono. role="alert" by default with aria-live="polite".