shadcn.io is not affiliated with official shadcn/ui
Input examples · Standard
Inline Label Input for React
A field with its label beside the input instead of above it.
Short labels can sit next to their field to save height. This example sets orientation horizontal on Field, gives the Age label a fixed width aligned to the end, and lets the number input take the rest of the row. Line several of these up and the labels form a tidy column. Use it for compact settings and short forms.
Preview
Installation
FAQ
How does the label sit beside the input?
Field takes orientation horizontal, which lays out its children in a row and centers them vertically. gap-4 spaces the label from the input.
Why does the label have a fixed width?
w-24 gives every label in a column the same width, so the inputs line up. flex-none! stops the label from growing, which a horizontal field would otherwise let it do, and justify-end aligns the text against the input.
How wide is the input?
flex-1 lets it fill the rest of the row, up to the field's max-w-sm. It's a type number input with the placeholder 25.
Does it work in right-to-left layouts?
Yes. The row follows the reading direction, and justify-end aligns the label to its end, so the label stays next to the input on either side.
Related
- Input with LabelA text input with a label above it
- Required Field InputA required field with an asterisk in its
- Two Field FormA two-field contact form for a name and
- Simple Input with Label FieldAn email input with its label above it
- Required LabelA label with a destructive asterisk that
- Input with DescriptionA field with a description between its