Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Starting Point Radio Cards Form Block for React

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.

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 pick how to begin with this radio card form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in two bands. The first is a required choice drawn as three cards on shared hairlines: each card is one whole label with an icon tile, a title, a description and a meta line with how long it takes ("2 minutes"). The chosen card is ringed in the foreground color, fills its icon tile and shows a check; the radios underneath are native, so the arrow keys move the choice and Tab leaves the group. A line under the cards says what the next step is for the card chosen and keeps its height whether or not anything is chosen. Pressing Continue with nothing chosen says "Choose how to start" and focuses the first card. The foot holds the Shine Button, the only colored control. It's built from native radios, Shine Button and Guides, with a CSS entrance only. For onboarding choices, plan pickers without prices, import-or-start-fresh screens and any pick between a few large options.

FAQ

How do I change the cards?

Edit STARTS at the top. Each card has an id, an icon (any element), a name, a line, a meta with the time and a next sentence for the line under the cards. Add a fourth card and the grid keeps three columns from the medium breakpoint, so give it a second row or change the column count.

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

The three cards are one radio group named by its heading. Tab enters the group and the arrow keys move the choice, as with any set of radios, and the focused card gets a visible outline. Each radio is named by the card's title and described by its line; the icon tile and the check are decorative. Choosing a card does not move focus.

Why does nothing start chosen?

A starting point is a decision, and a default would make it for the visitor. With none chosen, Continue stays pressable and answers with a message under the cards (an icon as well as words) and focus on the first card, so the next key press can start choosing.

How does it look on a phone?

The cards stack in one column, each keeping its full description and meta line, so nothing is hidden at 320 px. The foot is pinned to the bottom of the screen with Continue at full width.

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

Nothing is created: Continue says Started "From a template" in this demo. Nothing was created. To make it real, send the chosen id from the submit handler, create the workspace on your server and route to the step the next line promised.

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

With react-hook-form, keep the card id as one string field with an empty initial value and call field.onChange from each radio's change handler; mark the field required with the message the block shows.
  • 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

    Layout Picker Radio Form

    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.

  • 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

    Task Status Select Form

    Selects

    A required select of five task statuses, each with a glyph and a word, that moves a drawn task row to the status you choose once Move task is pressed.

All 42 form blocks