Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form blocks

Pro

Horizontal Radio Pills Form Block for React

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.

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

Set two short choices side by side with this horizontal radio 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 Priority (Low, Medium, High and Urgent) and the second is "Remind me again in" (15 minutes, 1 hour, 4 hours and 1 day), each a row of bordered radio pills that becomes a two-by-two grid on a phone. The pill chosen is solid foreground. The third band composes the two answers into one sentence ("Medium, ask again in 1 hour") and a line under it; an Urgent ticket with a day-long reminder says "Urgent tickets are re-sent every hour at most" and the sentence shows what the rule will really do. The radios are native, so the arrow keys move the choice inside a group. The foot holds the Shine Button to save the rule, quiet until something changed, beside an outline Discard. It's built from native radios, Button, Shine Button and Guides, with a CSS entrance only. For escalation rules, notification timing, sort and filter options and any two small choices that read as one setting.

FAQ

How do I change the options and the cap?

Edit PRIORITIES and REMINDERS for the pills (each has an id, a name for the pill and a phrase for the sentence) and SAVED for the rule the queue has now. The cap is the capped line in the component: change the pair it tests, or replace it with a lookup of your own rules.

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

Each row is a radio group named by its heading. Tab enters a group and the arrow keys move its choice; the chosen pill is solid and the focused one is outlined. The sentence is plain text under the groups, so a screen reader finds it by reading on, and the polite status line in the foot announces the result of saving.

When is Save rule available?

It is always pressable but quiet: while the rule matches the saved one, pressing it says "No changes to save." and the status line reads "No unsaved changes." Once a pill differs, the line reads "Changes not saved yet.", Save rule keeps the new rule as the saved one and Discard puts the saved pills back.

How does it look on a phone?

Each group becomes a two-by-two grid of pills, still one tap each, and the sentence stays under both. The foot is pinned to the bottom of the screen with Save rule and Discard side by side.

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

Nothing is saved to a queue: Save rule says "Saved in this demo. Nothing was sent." and keeps the rule for the rest of the visit. To make it real, send the two ids from the submit handler, apply the same cap on your server so it holds for every client, and show its answer in the status line.

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

With react-hook-form, keep the two ids as two string fields and call field.onChange from each pill's change handler; a resolver can apply the same urgent-and-day rule.
  • 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

    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

    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

    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

    Range Slider Thresholds Form

    Numbers and pickers

    A two-thumb slider that sets warn and critical CPU thresholds over named zones: the thumbs cannot cross, the zones and six sample readings follow, and each thumb is named by what it sets.

  • 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