Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Grid Layout Project Form Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Lay a form out on a real grid with this grid layout 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 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.

What stays local, and how do I connect it for real?

Nothing is created: the foot says "PLT-0412 created in this demo. Nothing was sent." To make it real, post the draft from the submit handler, validate it again on the server and show its answer in the status line.

How do I connect it to react-hook-form or TanStack Form?

With react-hook-form, use Controller for the selects and date inputs, and move problemsOf into a resolver; each field already reads its message by name.
  • Pro

    Date Range Form

    Dates and times

    Two date inputs and a month that stay one range: booked nights drawn struck through and named when a block runs over one, an end before the start refused on the end field, and a two-night minimum.

  • Pro

    Listing Editor Form With Sidebar

    Dialogs and layouts

    A listing editor in a fixed-height window with a section index that follows the scroll, statuses worked out from the fields, and one Save listing action in the top bar.

  • Pro

    Address Form with ZIP Help

    Checkout and address

    A six-column address grid that never changes size: street, an apartment line behind a quiet button, city, a state select and a ZIP code that fills the city and state from a typed table of six.

  • Pro

    Brand Colour Picker Form

    Numbers and pickers

    A brand colour field that makes a scale: a hex input and the colour picker kept in sync, eight named presets, and five derived steps by lightness, each with its hex and a copy button.

  • Pro

    Ship-To Country Select Form

    Selects

    A combobox of 20 countries in four areas, each with a two-letter tile and calling code, where four are out of reach with the reason in the row and a band gives what a parcel to the chosen country needs.

  • Pro

    Credit Card Field Form

    Checkout and address

    A card as one joined control: number, expiry and CVC in a single group with one focus ring, a brand from the first digits, auto-advance, errors that name the part, and only the brand and last four kept after Save.

All 42 form blocks