Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Layout Picker Radio Form Block for React

A default project view picker with four radio tiles (list, board, calendar, timeline), each with a drawn thumbnail, and the chosen view redrawn large in a framed preview with what it is best for.

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

Let people see a layout before choosing it with this visual radio form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in two cells. The first holds a required choice of four views (List, Board, Calendar and Timeline) as a two-by-two grid of tiles on shared hairlines; each tile is one whole label with a greyscale thumbnail drawn from typed shapes, a title and a line. The second is a side cell with a framed figure that redraws the chosen view large, with a caption that says what the view is best for; on a phone it stacks under the tiles. The radios are native, so the arrow keys move the choice, and the chosen tile is ringed in the foreground color. The foot holds the Shine Button to set the default, quiet until the pick differs from the saved view, beside an outline Button to discard. It's built from native radios, Button, Shine Button and Guides, with a CSS entrance only. For view switchers, layout and density settings, theme pickers and any choice that is easier to see than to read.

FAQ

How do I draw my own views?

Each view in VIEWS has a list of shapes: rectangles with an x, y, w and h on a 120 by 80 grid and a tone of line, soft or strong. The same shapes draw the thumbnail and the large preview, so a new view needs one list, a name, a line and a sentence for the caption.

How does it work with a keyboard and a screen reader?

The tiles are one radio group named by its heading. Tab enters the group and the arrow keys move the choice; each radio is named by its title and described by its line. The drawings are hidden from assistive technology, so nothing depends on seeing them, and the caption is plain text that follows the choice.

Why does Set as default start quiet?

The block opens on the view the project already has, Board, so there is nothing to save. Choosing another tile makes the pick differ from the saved view and the status line reads that view's name; Set as default then keeps it as the saved one, and Discard returns to the saved tile.

How does it look on a phone?

The tiles stay two across and the preview stacks under them as its own band with its own top rule. The caption holds its height so choosing a view does not move the foot.

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

Nothing is saved to a project: Set as default says the view was saved in this demo and sends nothing. To make it real, send the chosen id from the submit handler and store it on the project, then open the project on that view.

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

With react-hook-form, keep the view id as one string field and call field.onChange from each tile's change handler.
  • Pro

    Starting Point Radio Cards Form

    Three whole-card radio choices for how a workspace starts (blank, from a template, imported from a file), each with an icon, a description and the time it takes, and a line that says what comes next.

  • Pro

    Required Radio Choice Form

    A required delivery-speed radio group that starts with nothing chosen: three rows with their time and extra cost, a total that follows the pick, and an error on the group if you book without choosing.

  • Pro

    Export Format Radio Form

    An export format list (CSV, JSON, plain text) whose chosen row opens to show what it is best for, the real size of this file and how it keeps headers, with an Export button that downloads the file.

  • Pro

    Horizontal Radio Pills Form

    Two horizontal radio groups drawn as bordered pills, priority and reminder delay, that write one sentence together and warn when an urgent ticket is paired with a day-long reminder.

  • Pro

    Store Setup Wizard Form

    A five-step store setup with a step rail (store, products, shipping, payments, launch) that marks steps done, current, optional or locked, checks each step on Continue and ends in a summary.

  • 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.

All 42 form blocks