Label
Plain accessible <label> wrapper (shadcn/ui convention, no Base UI primitive needed) — pair with Input via htmlFor/id. Used in ProfileSettings for the display_name field.
Paired with Input
Standard field composition — Label above Input, connected via htmlFor/id.
| Prop | Type | Default | Description |
|---|---|---|---|
| htmlFor | string | — | Connects the label to an input by id (required for accessibility) |
| className | string | — | Additional CSS classes to merge |
With a disabled field
The read-only email field in ProfileSettings — avatar_url and email are Google-sourced and not editable.
Need a design system like this?
I design and build products end‑to‑end — from first idea and design system to production‑ready code, ready to hand off to your development team.
Product Designer | AI Design Engineer | Designer for Startups | Mobile & Complex SaaS | from Idea to Product | Framer Developer