shadcn.io is an independent project built on shadcn/ui
The label Age sits beside a number field, in a fixed width, aligned to the end of that label. The placeholder is 25. The field fills the rest of the row.
Use it for compact settings where labels can share a column. On a phone, a stacked Field leaves more room for the input. In Vue, Ark UI does not stack this horizontal row for you.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm gap-4" orientation="horizontal">
<FieldLabel class="w-24 flex-none! justify-end">Age</FieldLabel>
<Input class="flex-1 bg-background" placeholder="25" type="number" />
</Field>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.
API Reference
Field
Sets orientation="horizontal". The rest is on the Field page.
Input
Sets placeholder="25" and type="number". The rest is on the Input page.
