shadcn.io is not affiliated with official shadcn/ui
Two Column Registration Form Block for React
A conference registration form of eight fields in two columns, a Fill order choice that runs them down or across, and a Show tab order switch that prints each field's place in the page order.
Installation
Overview
Show that what you read is what Tab visits, with this two column form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner. A toolbar band holds two controls: a Fill order choice in a Segment Group, Down or Across, and a Switch named Show tab order. The form below has eight registration fields in one fixed page order: first name, last name, work email and company, then ticket, track, dietary needs and T-shirt, the last four being Selects. From the large breakpoint they sit in two columns, filled down the first column and then the second, or across the rows; either way the page order does not change, and with Show tab order on each field carries its place as a small numeral. Below the large breakpoint it is one column. Register checks the required fields, names the first problem and focuses it. The Shine Button is the only colored control. It's built from Input, Select, Segment Group, Switch, Shine Button and Guides, with a CSS entrance only. For registration, profile and checkout forms with enough fields to need two columns.
FAQ
How can the columns fill differently when the tab order does not change?
The fields are in the page in one order and the grid decides where each one goes: Down is a column-first grid of four rows, Across is a row-first grid of two columns. Both place the fields in page order, so Tab always runs 1 to 8 and the numerals show it. The trap this guards against is a layout that moves fields with CSS order, so the screen reads one way and Tab visits another.
How do I change the fields or the number of rows?
The fields are the eight cells in the grid, each with a place prop for its numeral. lg:grid-rows-4 is the number of rows in the Down layout; for ten fields make it five. Selects take their options from the TICKETS, TRACKS, DIETARY and SHIRTS lists.
How does it look on a phone?
One column in page order, with the numerals still available through the switch. The Fill order choice is hidden below the large breakpoint, because there is nothing to choose.
When are problems shown?
On Register, for every required field at once, with the first one named in the status line and focused. Company, dietary needs and T-shirt are optional. Each field has a reserved line under it, so a message never moves the next field.