shadcn.io is not affiliated with official shadcn/ui
Grid Layout Project Form Block for Vue
A new-project form on a 12-column grid with fields spanning 4, 6, 8 or 12 columns, a Show grid switch that overlays the columns and labels each span, and one column on a phone.
Installation
Overview
Lay a form out on a real grid with this grid layout form for Vue with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. A toolbar band holds a Switch named Show grid; the grid band below holds eight fields on 12 columns: the project name takes 8 and the code 4, category, priority and owner take 4 each (three Selects), the start and end dates take 6 each (two Date Inputs) and the description takes all 12. With the grid shown, the 12 columns are drawn over the fields and each label prints its span at the end ("span 8"); turning it off fades the overlay and keeps every field where it is. Below the medium breakpoint every field is one column, the overlay and the switch are hidden and the fields stack in reading order. Create project checks every field, names the first problem in words and focuses it. The Shine Button is the only colored control. It's built from Input, Select, Date Input, Textarea, Switch, Shine Button and Guides, with a CSS entrance only. For record forms, project and listing setup and any form whose fields should line up on shared columns.
FAQ
How do I change the fields and their widths?
Each field cell carries its width as a class from SPANS (4, 6, 8 or 12) and the same number in its Span label, so change both together. The grid is md:grid-cols-12 and the cells are in reading order, so rows break wherever the spans add up to 12. Selects take their options from the CATEGORIES, PRIORITIES and OWNERS lists.
What does Show grid do?
It fades in 12 dashed columns over the grid band, numbered 1 to 12, and shows each label's span. It draws no layout of its own: the columns are placed with the same gap as the real grid, so what you see is where the fields sit. It ignores the pointer, is hidden from assistive technology and does nothing below the medium breakpoint, where every field is one column.
When are problems shown?
On Create project, for every field at once, with the first one named in the status line and focused. After that each field re-checks as it changes. Each field has a reserved line under it, so a message appearing never moves the next field. The end date must be on or after the start date, and the code is three letters, a dash and four digits, set to capitals as you type.
How does it look on a phone?
All eight fields stack in one column in the order of the grid, each with its label above and its line below. The foot is pinned to the bottom of the screen with Create project at full width.