24 Tailwind CSS radio buttons for checkout and onboarding flows, pricing-plan pickers, settings option lists, e-commerce colour and image swatches, star ratings, and payment-method selection — spanning selectable cards, segmented controls and sliding pills, 3D orbs and tilt cards, ink-splash and ripple animations, neon and glassmorphism styling, avatar pickers, and dark-mode themes. Scoped under .trb-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 24 Tailwind radio buttons. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
Full selectable cards that act as radio buttons — the checkout and onboarding staple — ported whole into utilities. The card reads its own state with v4's built-in has-checked: variant, descendants follow with group-has-checked:, and the lift is gated behind motion-safe: instead of being undone later.
The iOS-style billing toggle — Monthly / Yearly with a save badge — where a white thumb glides under the chosen option. The thumb is a before: pseudo-element on the track, moved by one arbitrary variant: has-[label:nth-child(2)_input:checked]:before:translate-x-full. The price below re-renders from the same radio state.
The settings-page staple: a vertical option list where every row carries an icon tile, a title, a one-line description and a custom radio on the right. Three grid columns, one has-checked: on the row, and group-has-checked: on everything that responds — tint, tile, icon and dot.
Radio rows designed for dark UI: the custom indicator ignites with a three-layer cyan glow that breathes on a slow loop. The glow is a --animate-trb04-breathe theme token whose keyframes live inside @theme, and the solid inner dot keeps the checked state readable without glow (WCAG 1.4.1).
The reference implementation every custom radio should start from: style the native <input type="radio"> itself with appearance-none. No hidden input, no wrapper spans, no ARIA — checked:, disabled: and focus-visible: sit directly on the element that owns those states, and forced-colors:appearance-auto hands the control back to Windows High Contrast.
A conversion-focused plan list where the marketing meta lives inside the choice: each row carries a price and an optional "Most popular" or "Best value" badge. A four-column grid keeps prices aligned whether or not a row has a badge, and a constant 2px border means the checked swap causes zero layout shift.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A radio with physicality: on check two concentric rings burst outward from the dot like a droplet hitting water — the input's own after: ring, chased 120ms later by a sibling ring driven with peer-checked:. Both are one-shot animate-* tokens, so re-checking replays the splash for free.
A three-way pill where the thumb glides between options and changes colour as it lands — Pickup amber, Delivery green, Dine-in violet. Position and hue come from one custom property per state: has-[label:nth-child(2)_input:checked]:[--thumb:…] on the track, read by before:bg-(--thumb).
Radio options as glossy 3D orbs: layered radial gradients build each sphere, a specular highlight tracks the cursor (a tiny controller writes two custom properties), and the checked orb earns a slowly orbiting ring. Each orb's hue is one arbitrary property, [--c:oklch(…)], and the shading tokens use @theme inline so they can read it.
A Material-style ink ripple reimagined for radio rows: checking an option splashes ink from the indicator until it floods the row, while the dot stamps in like a wet press. The splash is the row's before: circle, scaled 0 → 34 by has-checked: with an asymmetric transition, so ink soaks in slowly and dries fast.
A five-star rating built the right way: five radios in logical 1→5 order, cumulative fill, a hover preview and a staggered pop when the rating lands — plus a live caption ("Great") for the score. The cumulative logic is one arbitrary variant, group-has-[~label_input:checked]/star:: every star before the checked one lights up.
Premium selectable cards that tilt toward the cursor like they're on gimbals, with a glare sheen sweeping across as they rotate. perspective-[900px] on the row, transform-3d on the card, and an arbitrary [transform:rotateX(var(--rx))…] that a small controller feeds. The checked card locks in an accent edge-light and a check badge.
Radical restraint: a typography-first list where the only ornament is a checkmark that draws itself. The tick is an SVG polyline animated with [stroke-dashoffset:28] → group-has-checked:[stroke-dashoffset:0], and each option now previews itself — the grotesk, serif and mono choices are set in the faces they name.
The e-commerce essential: circular colour swatches that are radio buttons, wired to a product photo that retints the moment you pick. The checked ring is Tailwind's own ring-2 ring-offset-3 ring-offset-trb14-bg, the swatch edge is inset-ring, and the photo filter, caption and stock note all switch with group-has-[[value=…]:checked]/pdp:.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
List / Grid / Board switching done as a radio group: a flat toolbar of icon + label segments with a crisp underline that slides beneath the active view — and, new in the port, a live preview that re-lays itself out as you switch. The underline is an after: on the bar moved by has-[label:nth-child(n)_input:checked]:after:translate-x-*.
A sci-fi loadout selector: notch-cornered chips with neon ring indicators that ignite on selection — a conic energy arc spins around the checked ring while scanlines texture the chip. The arc's angle is registered with @property (the one piece that stays CSS); notches are [clip-path:polygon(…)], the ring cut is before:[mask:radial-gradient(…)].
A complete pricing-table selector: three plan cards with price, features and a "Recommended" crown — each card a radio, so the whole table is one submittable form control. The Select / Selected ✓ pill is two spans stacked with [grid-area:1/1] and cross-faded by group-has-checked:; the summary line under the table follows the value.
Circular options that fill with liquid when selected: an aqua wave rises inside the checked circle, its surface rolling with two counter-rotating crests. The port splits the motion across v4's individual transform properties — translate raises the water, rotate rolls it — so the rise transitions while the roll loops, with no combined keyframe.
A destination picker where photography is the control: each option is a photo in a tall arch. Unselected images rest desaturated; picking one blooms it to full colour, relaxes the arch into a soft rounded card and slides the caption up. The mask morph is just rounded-[85px_85px_18px_18px] → group-has-checked:rounded-[26px] — border-radius interpolates natively.
Dark glass cards wrapped in a living gradient border: at rest a faint rim; on selection a vivid violet-to-cyan gradient circulates around the perimeter. The port uses the two-background trick — [background:linear-gradient(card,card)_padding-box,conic-gradient(from_var(--trb20-angle),…)_border-box] on a transparent border — so there's no wrapper element, and @property animates the angle.
The "who's watching?" screen as a proper form control: profile photos where the active one scales up, gains a bright ring and full colour while the rest rest slightly dimmed. The double ring is ring-3 ring-trb21-acc ring-offset-4 ring-offset-trb21-bg; the sprung lift is motion-safe:. An "Add profile" tile shows how to mix an action into the row without joining the radio group.
The connected vertical list: options stacked in one bordered container with hairline dividers — one object, not floating cards — and a tinted rail that scales in beside the checked row. Dividers are divide-y on the container, the rail is scale-y-0 group-has-checked:scale-y-100, and each row now carries a card-brand chip.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
Radio options as chunky mechanical keys: each sits proud on a hard shadow base, and the selected key stays pressed down — travel, shadow and a darker cap all agree it's IN. Three elevation tokens (shadow-trb23-up, -hover, -down) pair with translate utilities, and group-active: previews the travel mid-click.
A calm signal: the checked radio emits soft glow rings that swell outward and dissolve like a sonar ping, one ring then another on a slow four-second cycle. Each option's colour is one arbitrary property, [--c:oklch(…)]; the second ring is offset with [animation-delay:2s]; and a live presence preview at the top shows how you'll appear.
FAQ
Frequently asked questions
How do these radio buttons keep the native input but still look fully custom?
The reference pattern (Demo 05) keeps a real <input type="radio"> in the DOM and strips its default rendering with appearance-none. You then draw the indicator with utilities on the input itself — a rounded-full ring plus a checked: variant that fills the centre dot or recolours the border. Because the element is still a genuine radio, the browser handles grouping, focus and form submission for free; nothing is faked with a <div>. The card demos push this further: the input is visually hidden with sr-only (still focusable) while a sibling label paints the whole card, reacting through peer-checked: or has-checked:. The rule across all 24 is the same — never delete the input, never swap it for a scripted <span>. Style the control that already exists.
How does the sliding pill thumb move under the selected option with no JavaScript?
Demos 02, 08 and 15 lay the options out in a row and place one absolutely-positioned thumb behind them. Each option is a radio-plus-label pair; the thumb is a single element sized to one segment (say w-1/2 or w-1/3). Selection is read with the sibling peer-checked: variant or a parent :has() query, and the thumb is moved with translate-x-0, translate-x-full and friends, eased by transition-transform. Demo 08 also swaps the thumb colour per option as it lands. The detail that trips people up: the thumb must sit under the labels in stacking order while the text stays above it, and every segment must be equal width or the translate distances stop lining up. Because the state lives in the checked radio, a reload or submit preserves the choice.
Why can I select more than one of these radios at the same time?
Almost always a missing or mismatched name. Radios only behave as a mutually-exclusive group when every <input type="radio"> in the group shares the samename value — the browser then unchecks the previous one for you. Copy a demo row and forget to reuse the name, or give each row a unique name, and every option becomes independently checkable, which is checkbox behaviour. The second offender is duplicated id attributes: each input needs a unique id and its label a matching for, or clicking a label toggles the wrong input. So per group: one shared name, a unique id per option, a unique for on each label. Remember the submitted data comes from value, so give every option a distinct, meaningful value too.
Are these Tailwind radio buttons keyboard accessible?
Yes, as long as you keep the native input. A real radio group is reached with Tab (focus lands on the checked option, or the first if none is checked) and you move between options with the arrow keys — the browser gives you that roving focus automatically, which a <div role="radiogroup"> reimplementation has to script by hand. Two things you must not break: keep the input focusable — use sr-only or appearance-none, never hidden or display:none, which drop it from the tab order — and render a visible focus-visible: ring on the control the user actually focuses. For a labelled set, wrap the options in a <fieldset> with a <legend> so screen readers announce the group's purpose. Icon-only pickers like the swatches and avatars need an aria-label on each input.
How do I make an entire card selectable, not just the little dot?
Two Tailwind approaches, both in the collection. The peer pattern (Demos 01 and 17): mark the hidden input peer, put the card markup in the very next sibling label, and style it with peer-checked:border-indigo-500 peer-checked:ring-2. This only works when the label is a following sibling of the input — peer-* cannot look backwards or across branches. The newer has-checked: pattern uses a :has() wrapper: drop the input anywhere inside the label and style the label with has-checked:bg-slate-800, so the layout is free. Make the whole label clickable by giving it the padding, marking the input sr-only, and adding cursor-pointer. Do not bolt a separate click handler onto the card — the label already forwards the click to its input.
How does the star-rating demo fill every star up to the one I click?
Demo 11 lays five radios in logical 1 to 5 DOM order and builds cumulative fill with the general-sibling combinator. Each star label styles itself and, through ~, the stars after it, so checking star 3 lights 1 through 3. Older CSS star widgets reversed the DOM with flex-row-reverse and used ~ the other way; this build keeps source order intact — correct for screen readers and keyboards — and drives the fill with :has() and peer logic instead. The hover preview is the same idea on hover, dimmed back once a real choice is made. The bug to avoid: if you reverse the visual order for styling convenience, arrow-key navigation and the submitted value come out backwards, so a keyboard user pressing right-arrow appears to lower their rating.
When should I use checkboxes or a select instead of these radios?
Radios are for one choice from a small, visible set where seeing every option matters — plans, payment methods, shipping speed (Demos 17 and 22). Reach for something else when the user may pick several: that is a group of <input type="checkbox">, not radios. Use a <select> when the list is long (roughly eight or more, or dynamically generated) so it saves vertical space and scrolls cleanly. And for a single on/off opt-in with a sensible default, one checkbox or a switch is clearer than a two-radio yes/no. Also avoid the heavier card and 3D demos for dense forms — a settings page with twenty questions does not want twenty glowing orbs. Match the ornament to the stakes: big selectable cards for a checkout decision, a plain row list for a preference buried in settings.
The ripple and glow animations feel distracting — can I tone them down?
Yes, and you should offer the choice. The animated demos — concentric ripple (07), ink splash (10), liquid wave (18), pulsing glow (24) — drive their motion with transition and animate-* utilities on the checked state. Gate them behind Tailwind's motion-safe: and motion-reduce: variants so users who set reduce motion in their OS get the state change without the travel: put the effect on motion-safe:animate-ping and either drop it or swap to an instant colour change under motion-reduce:. Crucially, selection must never depend on the animation finishing — the checked state is already true the moment the input flips, so the option is chosen even with every keyframe disabled. Continuous effects like the pulsing glow are the most fatiguing, so silence those first under motion-reduce:.
