shadcn.io is not affiliated with official shadcn/ui
Starting Point Radio Cards Form Block for Vue
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.
Installation
Overview
Let people pick how to begin with this radio card form for Vue with Ark 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.