~/css/tailwind-radio-buttons

6 Tailwind Radio Buttons

6 TailwindPublished 2026-10-04Free · no sign-up

Six radio button designs built with Tailwind utilities: custom circles, plan cards, a segmented control, colour swatches, a settings list with descriptions and a clothing size picker with a sold-out size. Every group uses a fieldset and legend.

Filter demos

01. Tailwind Custom Radios

TailwindForm

Radio buttons restyled with appearance-none and Tailwind utilities. The checked dot is an inset ring, checked:border-[6px] thickens the border into the dot, and the whole group sits in a fieldset with a legend for context.

View code

<fieldset class="grid gap-3 text-[15px] text-slate-800">
  <legend class="mb-2 font-bold">Delivery</legend>
  <label class="flex cursor-pointer items-center gap-3"><input type="radio" name="tw-d" class="h-5 w-5 appearance-none rounded-full border-2 border-slate-400 bg-white transition-all checked:border-[6px] checked:border-blue-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-200" checked> Standard</label>
  <label class="flex cursor-pointer items-center gap-3"><input type="radio" name="tw-d" class="h-5 w-5 appearance-none rounded-full border-2 border-slate-400 bg-white transition-all checked:border-[6px] checked:border-blue-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-200"> Express</label>
  <label class="flex cursor-pointer items-center gap-3"><input type="radio" name="tw-d" class="h-5 w-5 appearance-none rounded-full border-2 border-slate-400 bg-white transition-all checked:border-[6px] checked:border-blue-600 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-blue-200"> Pick up in store</label>
</fieldset>

02. Tailwind Plan Radio Cards

TailwindPricing

Plan cards that act as one radio group. has-[:checked]: outlines the chosen card, the price uses tabular-nums so digits align, and because the inputs share a name the arrow keys move the selection between plans.

View code

<fieldset class="grid w-full max-w-xl grid-cols-1 gap-3 sm:grid-cols-3">
  <legend class="mb-3 text-xs font-bold uppercase tracking-widest text-slate-400">Plan</legend>
  <label class="relative grid cursor-pointer gap-1 rounded-2xl border border-slate-700 bg-slate-900 p-4 text-slate-100 has-[:checked]:border-violet-400 has-[:checked]:bg-violet-950 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-violet-300"><input type="radio" name="tw-plan" class="absolute right-3 top-3 accent-violet-400"><b>Starter</b><span class="text-2xl font-extrabold tabular-nums">$9</span><span class="text-sm text-slate-400">1 store</span></label>
  <label class="relative grid cursor-pointer gap-1 rounded-2xl border border-slate-700 bg-slate-900 p-4 text-slate-100 has-[:checked]:border-violet-400 has-[:checked]:bg-violet-950 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-violet-300"><input type="radio" name="tw-plan" class="absolute right-3 top-3 accent-violet-400" checked><b>Growth</b><span class="text-2xl font-extrabold tabular-nums">$29</span><span class="text-sm text-slate-400">3 stores</span></label>
  <label class="relative grid cursor-pointer gap-1 rounded-2xl border border-slate-700 bg-slate-900 p-4 text-slate-100 has-[:checked]:border-violet-400 has-[:checked]:bg-violet-950 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-violet-300"><input type="radio" name="tw-plan" class="absolute right-3 top-3 accent-violet-400"><b>Scale</b><span class="text-2xl font-extrabold tabular-nums">$79</span><span class="text-sm text-slate-400">Unlimited</span></label>
</fieldset>

03. Tailwind Segmented Control

TailwindToolbar

A three-way segmented control for switching between Day, Week and Month views. Each segment is a label wrapping an sr-only radio, and has-[:checked]: raises the selected segment with a white background and a soft shadow.

View code

<fieldset class="inline-flex rounded-xl bg-slate-200 p-1 text-sm font-semibold">
  <legend class="sr-only">Calendar view</legend>
  <label class="cursor-pointer rounded-lg px-4 py-2 text-slate-600 has-[:checked]:bg-white has-[:checked]:text-slate-900 has-[:checked]:shadow-sm has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500"><input type="radio" name="tw-v" class="sr-only">Day</label>
  <label class="cursor-pointer rounded-lg px-4 py-2 text-slate-600 has-[:checked]:bg-white has-[:checked]:text-slate-900 has-[:checked]:shadow-sm has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500"><input type="radio" name="tw-v" class="sr-only" checked>Week</label>
  <label class="cursor-pointer rounded-lg px-4 py-2 text-slate-600 has-[:checked]:bg-white has-[:checked]:text-slate-900 has-[:checked]:shadow-sm has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-blue-500"><input type="radio" name="tw-v" class="sr-only">Month</label>
</fieldset>

04. Tailwind Colour Swatches

TailwindE-commerce

Product colour swatches built as radios with named colours for screen readers. The selected swatch gets a double ring from ring and ring-offset utilities, which reads clearly on both light and dark product photos.

View code

<fieldset class="flex gap-4">
  <legend class="mb-3 text-[15px] font-semibold text-slate-800">Colour</legend>
  <label class="h-9 w-9 cursor-pointer rounded-full bg-blue-600 has-[:checked]:ring-2 has-[:checked]:ring-slate-900 has-[:checked]:ring-offset-2 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-blue-600"><input type="radio" name="tw-c" class="sr-only" checked><span class="sr-only">Ocean</span></label>
  <label class="h-9 w-9 cursor-pointer rounded-full bg-green-700 has-[:checked]:ring-2 has-[:checked]:ring-slate-900 has-[:checked]:ring-offset-2 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-blue-600"><input type="radio" name="tw-c" class="sr-only"><span class="sr-only">Forest</span></label>
  <label class="h-9 w-9 cursor-pointer rounded-full bg-amber-200 has-[:checked]:ring-2 has-[:checked]:ring-slate-900 has-[:checked]:ring-offset-2 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-blue-600"><input type="radio" name="tw-c" class="sr-only"><span class="sr-only">Sand</span></label>
  <label class="h-9 w-9 cursor-pointer rounded-full bg-slate-700 has-[:checked]:ring-2 has-[:checked]:ring-slate-900 has-[:checked]:ring-offset-2 has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-4 has-[:focus-visible]:outline-blue-600"><input type="radio" name="tw-c" class="sr-only"><span class="sr-only">Charcoal</span></label>
</fieldset>

05. Tailwind Radio List

TailwindSettings

A bordered list of options with descriptions, where the selected row gets a coloured left bar from an inset shadow utility. The description sits inside each label, so clicking anywhere on the row chooses it.

View code

<fieldset class="w-full max-w-sm overflow-hidden rounded-2xl bg-slate-900">
  <legend class="px-4 pb-2 pt-4 font-bold text-slate-100">Who can message you</legend>
  <label class="flex cursor-pointer gap-3 border-t border-slate-800 px-4 py-3 has-[:checked]:bg-slate-800 has-[:checked]:shadow-[inset_3px_0_0_#34d399] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-emerald-300"><input type="radio" name="tw-m" class="mt-1 accent-emerald-400" checked><span><b class="block text-sm text-slate-100">Everyone</b><span class="text-sm text-slate-400">Any visitor to your shop.</span></span></label>
  <label class="flex cursor-pointer gap-3 border-t border-slate-800 px-4 py-3 has-[:checked]:bg-slate-800 has-[:checked]:shadow-[inset_3px_0_0_#34d399] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-emerald-300"><input type="radio" name="tw-m" class="mt-1 accent-emerald-400"><span><b class="block text-sm text-slate-100">Customers</b><span class="text-sm text-slate-400">Only people with an order.</span></span></label>
  <label class="flex cursor-pointer gap-3 border-t border-slate-800 px-4 py-3 has-[:checked]:bg-slate-800 has-[:checked]:shadow-[inset_3px_0_0_#34d399] has-[:focus-visible]:outline has-[:focus-visible]:outline-2 has-[:focus-visible]:-outline-offset-2 has-[:focus-visible]:outline-emerald-300"><input type="radio" name="tw-m" class="mt-1 accent-emerald-400"><span><b class="block text-sm text-slate-100">Nobody</b><span class="text-sm text-slate-400">Turn messages off.</span></span></label>
</fieldset>

06. Tailwind Size Picker

TailwindE-commerce

Clothing size buttons with a sold-out option. The disabled radio is skipped by the keyboard, has-[:disabled]: draws a diagonal line through the size with an arbitrary gradient value, and the sold-out state is also given in hidden text.

View code

<fieldset class="flex flex-wrap gap-2 text-sm font-bold">
  <legend class="mb-3 w-full text-slate-400">Size</legend>
  <label class="grid h-11 min-w-12 cursor-pointer place-items-center rounded-lg border border-slate-600 px-3 text-slate-100 has-[:checked]:border-white has-[:checked]:bg-white has-[:checked]:text-slate-900 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-sky-300"><input type="radio" name="tw-s" class="sr-only">S</label>
  <label class="grid h-11 min-w-12 cursor-pointer place-items-center rounded-lg border border-slate-600 px-3 text-slate-100 has-[:checked]:border-white has-[:checked]:bg-white has-[:checked]:text-slate-900 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-sky-300"><input type="radio" name="tw-s" class="sr-only" checked>M</label>
  <label class="grid h-11 min-w-12 cursor-not-allowed place-items-center rounded-lg border border-slate-700 px-3 text-slate-500 bg-[linear-gradient(to_top_right,transparent_calc(50%-1px),#64748b_50%,transparent_calc(50%+1px))]"><input type="radio" name="tw-s" class="sr-only" disabled>L<span class="sr-only"> (sold out)</span></label>
  <label class="grid h-11 min-w-12 cursor-pointer place-items-center rounded-lg border border-slate-600 px-3 text-slate-100 has-[:checked]:border-white has-[:checked]:bg-white has-[:checked]:text-slate-900 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-sky-300"><input type="radio" name="tw-s" class="sr-only">XL</label>
</fieldset>

About these Tailwind Radio Buttons

Custom circles

appearance-none rounded-full border-2 draws the circle, and checked:border-[6px] thickens the border into a filled dot when selected. The transition-all class animates the change smoothly.

Labels as the visible control

For swatches, sizes and segments, hide the input with sr-only and style the label with has-[:checked]:. The input still receives focus, so add has-[:focus-visible]:ring-2 to the label.

Arbitrary values

Tailwind's square-bracket syntax handles one-off styles, such as the inset shadow bar shadow-[inset_3px_0_0_#34d399] on the selected list row or the diagonal line gradient on the sold-out size.

Grouping

Wrap every group in a fieldset with a legend, and give the inputs one name. Arrow keys then move between options and screen readers read the legend with each choice.

Frequently asked questions

Do these need JavaScript?

No. All six work with HTML and Tailwind classes only.

Can I preselect an option?

Yes. Add the checked attribute to the input you want selected by default.

Is there a CSS version?

Yes, the CSS radio buttons collection covers similar designs in plain CSS.