OneTaskBy Tim King · Updated
Custom Radio Button CSS
Radio Buttons as Dots, Selectable Cards or a Segmented Pill Group
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Custom Radio Button Builder works
This custom radio button CSS builder styles real radio inputs. Native radio buttons are tiny, grey and impossible to brand. This builder styles real radio inputs three ways — a classic dot, a card you can click anywhere on, or a segmented pill group — without touching how they behave. Click the options in the preview, then copy the HTML and CSS.
Custom radio button CSS: styling the real input
Every variant keeps a real <input type="radio"> in the DOM and styles the <label> that follows
it. The input is visually hidden with the standard clip technique rather than display: none,
which would remove it from the tab order and from screen readers. Clicking the label checks the
input because the label's for matches the input's id, and CSS reacts through the
:checked + label sibling selector.
Dot. The label's ::before pseudo-element draws the circle. Unchecked, it is a bordered ring
with an inset box-shadow the same colour as the background filling it completely. Checked, the
background becomes the accent colour and the shadow shrinks to a thin ring, revealing the coloured
dot inside. Animating the shadow width gives a smooth grow-in rather than a pop.
Card. The whole label becomes a bordered box with the dot inside. Checked cards get an accent
border and a translucent accent background, generated as the accent colour with an 8 percent
alpha suffix. Cards are the right choice when each option has a description: put the text in a
<span> after the option name and the dot stays aligned to the top row.
Pills. The labels sit in an inline flex container with a small padding and the checked label gets a solid accent background. There is no dot, because the filled segment is the indicator. This is a segmented control: use it for two to five short options, such as Monthly / Yearly or view modes, not for long lists.
Fieldset and legend. The group is wrapped in a <fieldset> with a <legend>, which is how
the group's name reaches assistive technology. Screen readers announce "Choose a plan, group,
Starter, radio button, 1 of 3", which a bare <div> with a heading cannot provide.
Keyboard. Tab moves focus into the group on the checked option; arrow keys move between
options and check them as they go; Space checks the focused option. The CSS puts a visible focus
ring on the label via input:focus-visible + label, so keyboard users can see where they are
even though the input itself is hidden.
Naming. All inputs in a group share one name so only one can be checked. The generated
value is a slug of the option text; change it to whatever your backend expects.
FAQ
Why not use accent-color instead of all this?
accent-color recolours the native radio in one line and is the right choice if colour is all you
need. It cannot change the size much, remove the platform look, or produce cards and pills. Use
accent-color for quick wins and this generator when the design calls for more.
Why is the input hidden with clip rather than display none?
display: none and visibility: hidden remove the input from the tab order and from the
accessibility tree, so keyboard users cannot reach it and screen readers do not know it exists.
The clip technique keeps it present but invisible, which is exactly what is wanted.
Can a card contain more than a title?
Yes. Put the title in a <strong> and a description in a <span> inside the label, and set the
label to align-items: flex-start so the dot lines up with the title. Prices, icons and images
all work the same way; the label remains one click target.
How do I add a disabled option?
Add the disabled attribute to the input and a rule such as
.radios input:disabled + label { opacity: 0.5; cursor: not-allowed; }. The browser stops it
being selected by mouse or keyboard, and the styling tells the user why.
Should I use pills or a select for a small set of options?
Pills show all options at once and take one click; a select hides them behind a click and scales to dozens of options. For two to five short choices, pills are faster to scan and use. Beyond that, use the Select Dropdown Builder instead.
See also: all Forms & Inputs tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, UI Components, Colour.
Related tools
Multi-Step Form Builder
Wizard forms with step indicators, per-step validation and Back/Next buttons.
Select Dropdown Builder
Custom-styled native select with your own arrow, no JavaScript.
Dual Range Slider
Two-thumb min/max slider for price filters, no library needed.
Floating Label Form
Material-style floating labels in pure CSS with outlined, filled and underline variants.
Form Progress Bar
Step indicators and progress bars for multi-step forms and checkouts.