Radio group

Let people pick one option at a glance — as a list, as big cards with an icon, or as a pill switch — and it still posts like the plain form it is.

Also called

chunky radio buttonsradio cardscard radio buttonssegmented controlsegmented buttonstoggle button groupcustom radio buttonsstyled radio buttonsGravity Forms radioWPForms multiple choice

What it replaces

• Gravity Forms / WPForms / Contact Form 7 radio fields with a theme’s styling
• page-builder “radio image” and “card select” add-ons
• JavaScript segmented controls that replace the inputs with divs

Accessibility

Written so the page works for every visitor, whether they browse with a mouse, a keyboard or a screen reader, and whether or not they have asked for less motion.

• Real radios in a <fieldset> named by its <legend>: nothing is replaced, given a role or hidden from assistive technology, so screen readers announce “radio button, 2 of 3” and the group’s question.
• The keyboard is the browser’s: Tab enters the group on the checked radio (or the first), the arrow keys move and select, Space selects, Tab leaves. No script is involved.
• Each radio is named by its title only; a chunky card’s line of text is its description (aria-describedby), and the hint describes the group.
• A visible 3px focus ring on the radio, or around the whole card or segment in those looks. Every option is at least 44px tall.
• Color is never the only signal: the checked radio has a dot, the checked card a heavier border and a fill, and in forced-colors mode checked cards and segments get a Highlight outline.
• prefers-reduced-motion: no color transition.
• Without JavaScript nothing is missing: it is a form control, and it posts `name=value` in a plain form, with `required` validation by the browser. The script only adds the data-changed event for hosts.

Where it's live

• superherotech.ai: /elements/radio-group/ (demo)

How to ask for it

“The radio-group on our home page, with …”

Name it, say which page and which part of the page it goes on, and say what goes in it: your photos, your words, your colors. That is a complete request. We build it, you approve it, and it goes live. If you know it by another name, from WordPress or from another site, that works too.

More elements you can ask for: Before / After, Particle field, Mega menu, Video background, Parallax band, Scroll reveal, Business hours, News ticker, Flip box, Instagram feed, Accordion / FAQ, Card slider, Tabs, Info list, Video player, Testimonial carousel, Icon library, Animated text, Cookie consent, Animated background, Modal box, Announcement bar, Image hotspots, Info circle, Slide box, Countdown, Content toggle, Off-canvas panel, Video gallery, Map and directions, Link effects, Tabcordion, Tooltip, Responsive table, Notice, Toast, Loading, Menu button, Stepper, Tags, Scrollbox, Sticker. Or see all of them working.