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.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn