Component · C-015

FormRow

Field in a horizontal layout: label on the left and control on the right from sm up. On mobile it returns to vertical so the text is not squeezed.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/field.json

Accessibility

FormRow is Field with orientation horizontal: it keeps the reading order of label first, then control.
At sm and up the label takes 140 px; on mobile it stacks so words are not cut.
Keep labels short: description and error live in the control column, not under the label.
The error is announced exactly as in Field, with aria-invalid and aria-live polite.

Read the whole page