Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Label with Description
A React form label with muted helper text description using shadcn/ui Label for providing contextual field guidance
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Labels alone don't always tell the whole story. This React pattern shows Label with Username plus text-muted-foreground description text—explains the field's purpose or provides helpful context. Built with shadcn/ui Label and space-y-1 spacing, it's perfect for public-facing fields needing explanation, username conventions, privacy notes, data usage clarification, or any form field where additional context reduces user confusion and input errors.
This will be your public display name
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Required Label
Label with asterisk
Label with Tooltip
Label with info tooltip
Optional Label
Label with optional text
Input Field
Text input component
Form
Complete form component
Textarea
Multi-line input
Questions you might have
React Required Label
A React form label with red asterisk indicating required field using shadcn/ui Label component for form validation visual cues
React Label with Tooltip
A React form label with Info icon tooltip using shadcn/ui Label, Tooltip, and Lucide React for contextual help without cluttering layout