shadcn.io is not affiliated with official shadcn/ui
Required Radio Choice Form Block for React
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.
Installation
Overview
Make a single required choice clear with this radio group form for React with Base UI. A compact header sits over a hairline frame with a plus mark on each corner, in three bands. The first is a Radio Group of three delivery speeds laid out as rows on shared hairlines: each has its name and a line on how it is handed over at the start, and its extra cost and its time at the end in tabular figures. Nothing is chosen on load. The second band is a short list that adds up the total from the choice (the postage plus the speed) and rewrites itself on every pick. The foot holds the Shine Button, the only colored control, with a polite status line beside it. Booking with nothing chosen puts a message on the group, in words with an icon, and moves focus to the first radio; picking never moves focus, so the arrow keys keep walking the rows. The radios are drawn in the foreground color. It's built from Radio Group, Field, Shine Button and Guides, with a CSS entrance only. For delivery speeds, shipping methods, plan terms and any choice the visitor has to make on purpose.
FAQ
How do I change the options and the prices?
Edit SPEEDS and POSTAGE at the top. Each speed has an id, a name, a line, a time and an extra in cents. The total, the list under the rows and the status line all come from those numbers, and a speed with an extra of 0 prints "Included". Money is formatted with Intl.NumberFormat, so changing the currency is one line.
Why does it start with nothing chosen?
A default that the visitor never looked at is a decision made for them, and for a cost that matters that is the wrong default. With no radio on, pressing Book delivery shows "Choose a delivery speed." under the rows, marks the problem with an icon as well as words, and moves focus to the first radio. The button stays pressable instead of being disabled, so the visitor learns what is missing rather than facing a dead button.
How does it work with a keyboard and a screen reader?
The group is named "Delivery speed" and described by the line under it, so the error is read with the group. Tab enters the group and the arrow keys move the choice. Choosing does not move focus anywhere, and the status line says what changed ("Next day: total $10.50."). The cost on each row is read after its name and line, and the time is plain text rather than an icon.
Does it work right to left?
Yes. The radio, the name and the line sit at the start and the cost and time at the end of each row, so the layout mirrors with the page direction. Each name and line is isolated, and each price is kept left to right, so mixed text and digits stay in order.
What stays local, and how do I connect it for real?
Nothing is booked: pressing Book delivery says "Booked Next day in this demo." and sends nothing. To make it real, post the chosen speed's id from the submit handler, price it again on your server so the client's total is never trusted, and show the server's answer in the same status line.
How do I connect it to react-hook-form or TanStack Form?
Keep the speed as one string field with an empty initial value and mark it required in your schema, with the message the block already shows. With react-hook-form, wrap the group in a Controller, pass field.value to the group and call field.onChange from its change handler; on a failed submit, focus the first radio from the form's onInvalid.
Related
- Pro
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
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
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
Task Status Select Form
SelectsA 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.
- Pro
Minimal Single Question Form
Text fieldsThe calmest form: one page with a mark, a heading that asks one question, one field with a hidden label and one full-width button, with the answer or the one problem shown under the field.
- Pro
Address Form with ZIP Help
Checkout and addressA 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.