--- title: "Radio button UI: anatomy, variants and examples | Kombai" description: "Radio buttons let people pick exactly one option from a short list, with every option visible at once." canonical_url: https://kombai.com/glossary/radio-button/ author: "The Kombai Team" --- # Radio button Radio buttons let people pick exactly one option from a short list, with every option visible at once. - Also called: radio, option button - Platforms: Web, Mobile - In the Kombai gallery: [55 web designs](https://kombai.com/gallery/web/radio-button/), [35 mobile designs](https://kombai.com/gallery/mobile/radio-button/) - [Cyprelle](https://kombai.com/gallery/inspirations/radio-button-ios-28/) (Mobile) - [Calderon](https://kombai.com/gallery/inspirations/radio-button-web-14/) (Web) - [Bellhaven](https://kombai.com/gallery/inspirations/radio-button-ios-23/) (Mobile) ## What is a radio button? A radio button is a small circle for choosing one option from a set. All the options stay visible, and selecting one clears whichever was selected before, so the group never holds more than one answer. - A filled dot inside the circle marks the selected option. - Options sit together under a question or heading that names the choice. ## When to use radio button - **One answer from a few.** Sort order, a plan or a delivery speed, where only one makes sense. - **Options people compare.** Every choice stays on screen with its price or explanation. - **A required question.** Forms and onboarding steps that need exactly one answer. ## When not to use one - **Several answers allowed.** If people might pick more than one, use checkboxes. - **Long lists.** Use a dropdown or a searchable select for countries or time zones. - **Switching views.** To change what the screen shows on the spot, use a segmented control or tabs. ## Anatomy 1. **Circle**: The ring every option has 2. **Dot**: Fills the selected option 3. **Label**: Names the option 4. **Group label**: The question above the set 5. **Description**: Optional detail, like a price 6. **States**: Unselected, selected, disabled, focus ## Variants We sorted every radio button design in the Kombai gallery and found five patterns. ### 1. Radio lists The default. One row per option with the circle at the start or the end, for sort orders, timings and settings. - [Lumenta](https://kombai.com/gallery/inspirations/radio-button-ios-6/) (Mobile) - [Ostrelle](https://kombai.com/gallery/inspirations/radio-button-ios-13/) (Mobile) - [Torrowmoor](https://kombai.com/gallery/inspirations/radio-button-web-50/) (Web) ### 2. Radio cards Each option is a card with a title and a line of explanation, and the selected card gets an outline or a tint. - [Perrindale](https://kombai.com/gallery/inspirations/radio-button-ios-31/) (Mobile) - [Orcadia](https://kombai.com/gallery/inspirations/radio-button-ios-18/) (Mobile) - [Vantara](https://kombai.com/gallery/inspirations/radio-button-web-7/) (Web) ### 3. Rows with details Options carry a thumbnail, an icon or a price, like ride tiers or game editions, so people compare before they pick. - [Rookwood](https://kombai.com/gallery/inspirations/radio-button-ios-2/) (Mobile) - [Fernlow](https://kombai.com/gallery/inspirations/radio-button-ios-12/) (Mobile) - [Pallavo](https://kombai.com/gallery/inspirations/radio-button-ios-11/) (Mobile) ### 4. Visual options A preview of each choice, like a theme or a layout, with the radio beside or below it. - [Quillon](https://kombai.com/gallery/inspirations/radio-button-ios-8/) (Mobile) - [Larkspell](https://kombai.com/gallery/inspirations/radio-button-web-31/) (Web) - [Tallowmere](https://kombai.com/gallery/inspirations/radio-button-web-17/) (Web) ### 5. Radio pairs Two options, often a default and an alternative, like a free subdomain or a domain you already own. - [Mosswick](https://kombai.com/gallery/inspirations/radio-button-web-25/) (Web) - [Zephyrine](https://kombai.com/gallery/inspirations/radio-button-web-55/) (Web) - [Oakhurst](https://kombai.com/gallery/inspirations/radio-button-web-45/) (Web) ## Where radio buttons show up ### Sort and filter sheets One sort order at a time, often above checkboxes or sliders for the filters. - [Fenwick](https://kombai.com/gallery/inspirations/radio-button-ios-34/) (Mobile) - [Duskerry](https://kombai.com/gallery/inspirations/radio-button-ios-29/) (Mobile) - [Brightloom](https://kombai.com/gallery/inspirations/radio-button-web-18/) (Web) ### Onboarding questions One question per screen, with big tappable rows and a Continue button below. - [Kirkwold](https://kombai.com/gallery/inspirations/radio-button-ios-33/) (Mobile) - [Palewood](https://kombai.com/gallery/inspirations/radio-button-ios-19/) (Mobile) - [Bramblewick](https://kombai.com/gallery/inspirations/radio-button-ios-4/) (Mobile) ### Plans and amounts Data plans, team tiers and savings amounts, each with its price on the card. - [Marnix](https://kombai.com/gallery/inspirations/radio-button-ios-3/) (Mobile) - [Tallowmere](https://kombai.com/gallery/inspirations/radio-button-ios-15/) (Mobile) - [Duskrow](https://kombai.com/gallery/inspirations/radio-button-web-16/) (Web) ### Cancellation surveys A short list of reasons before someone leaves, with one answer and an optional note. - [Alderglen](https://kombai.com/gallery/inspirations/radio-button-ios-1/) (Mobile) - [Wrenlow](https://kombai.com/gallery/inspirations/radio-button-web-53/) (Web) - [Ashvale](https://kombai.com/gallery/inspirations/radio-button-web-9/) (Web) ## Radio button vs similar components | | [Radio button](https://kombai.com/glossary/radio-button/) | [Checkbox](https://kombai.com/glossary/checkbox/) | [Segmented control](https://kombai.com/glossary/segmented-control/) | [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) | |---|---|---|---|---| | Choices | Exactly one, all visible | Any number from a list | One of 2 to 5, in a row | One, from a hidden list | | Space | One row per option | One row per option | One compact bar | One field until opened | | Best for | Short lists people compare | Multi-select and consent | Switching views or modes | Long lists like countries | ## Build notes - Give every radio in a group the same name, so selecting one clears the others. - Wrap the group in a
with a that asks the question. - The group is one tab stop. Arrow keys move the selection and wrap at the ends. - For custom radios, use role="radiogroup" around elements with role="radio" and aria-checked. - Put radios to the left of their labels, and make the label clickable. - Add None of the above or I do not know when that is a valid answer. ## FAQ ### Should I use radio buttons or checkboxes? Use radio buttons when people can pick only one option, and checkboxes when they might need more than one. A radio group can never hold two answers, so it suits questions like a plan, a size or a delivery speed. ### Should one radio button be selected by default? In a form question, usually not. The GOV.UK Design System advises against pre-selecting, because people are more likely to miss the question or submit the wrong answer. For a setting that already has a value, like a sort order, show the current value as selected. ### How do arrow keys work in a radio group? The whole group is one tab stop. Tab moves focus to the selected radio, or the first one if none is selected. The arrow keys move to the next or previous option and select it, wrapping at the ends, and Tab leaves the group. ### Radio buttons or a dropdown? Radio buttons show every option at once, which suits short lists people should read and compare. A dropdown hides its options behind a click, which suits long, familiar lists like countries or time zones. ## Related terms - [Checkbox](https://kombai.com/glossary/checkbox/) - [Segmented control](https://kombai.com/glossary/segmented-control/) - [Dropdown menu](https://kombai.com/glossary/dropdown-menu/) - [Toggle switch](https://kombai.com/glossary/toggle-switch/) ## References - [WAI-ARIA Authoring Practices: Radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) - [MDN: The radio input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio) - [GOV.UK Design System: Radios](https://design-system.service.gov.uk/components/radios/)