shadcn.io is not affiliated with official shadcn/ui
Input Group examples · Label
Block Labels Input Group for React
An input and a textarea, each with its label in a header row inside the group.
Labels inside the field's frame instead of above it. Each group has a block-start addon holding a Label, Full Name over an input and Bio over a textarea with a divider. Each label points at its control with htmlFor and id.
Preview
Installation
FAQ
How does the label end up above the input?
Its InputGroupAddon has align="block-start", which makes it a full-width row above the control, though it comes after the control in the code.
How is each label tied to its control?
Label sets htmlFor to the control's id, so it names the field and a click on it focuses the field.
Why does only the Bio header have a line?
border-b on that addon draws a divider between the label and the larger textarea. The input's header has none.
Why text-foreground on the labels?
Addon text is muted by default; text-foreground gives the labels full contrast.
Do the ids need to be unique?
Yes, on the whole page. Generate them per instance when a form can appear more than once.
When should I use Field instead?
When the label belongs outside the frame, with a description or an error: a Field around the input group does that.
Related
- Inline Labels Input GroupA username input after an @ label and a
- Label with Tooltip Input GroupAn email input with its label and a help
- Label with Counter Input GroupA title input with its label and a
- Simple Text Input FormA form with one username text input that
- Input with LabelA text input with a label above it
- Simple TextareaA plain textarea with a placeholder and