Radio button UI component for Figma — 16 variants

Component Overview

Use radio button patterns to organize forms where one option is chosen from a visible group. Keep the relevant state and next action clear so the component is easy to scan. Align labels and visual priority with the screen around it.

Allowing Single Selections

Use radio buttons when one option must be selected, group choices under a label and identify the selected state clearly. Keep labels concise and use spacing or icon cues to reinforce the message without relying on color alone.

Grouping Options

In Figma, compare the component variants in a real product screen. Check spacing, contrast and labels across relevant states, then adapt the pattern to the team's design system. Document the selected variant and relevant states so the pattern stays consistent across screens.

Explaining Options

Each Radio usually includes a label that explains the option it stands for. This label provides context and clarity, helping users understand what each choice represents. Clear labeling is essential for an intuitive user experience, ensuring that users can make informed decisions quickly and easily. Our UI kit includes customizable Radio components that can be easily tailored to fit any design, providing a user-friendly way to present exclusive options.

Types and Variants

Standard: Single radio with label.
With Sublabel: Includes helper text for contextual clarity.
Stacked: Vertically aligned for long labels or mobile screens.
Inline Group: Horizontally aligned for fast scanning or compact spaces.
Disabled: Non-interactive state for locked or unavailable options.
Variants adapt visually to light/dark themes and support design tokens like radio.bg, radio.dot, and radio.label.

Sizes, Spacing, and Scale

Emvi UI supports three sizes for consistent UI density:
SM – compact layouts or dense tables
MD – default for forms, flows, and settings
LG – for onboarding, highlighted selections, or touch-first interfaces
Spacing between the radio and label is handled via Figma Auto Layout and Tailwind utilities (gap, align-center). Ensure hit areas follow accessibility standards (≥44x44px).

States and Behavior

Radio buttons behave as part of a grouped set defined by the name attribute in HTML. Only one can be selected at a time. States include:
Unchecked / Checked
Hover / Focus-visible
Disabled (non-selectable)
Error (used during validation)
UX-wise, radio buttons should be used when all available options are visible at once—avoid hiding or nesting options under toggles unless strongly justified.

Accessibility

To ensure inclusive design:
Use <label> for clickable areas
Keep name attribute consistent across grouped radios
Use aria-describedby for helper text
Ensure visible focus ring
Don't rely solely on color to convey state
Screen reader users will benefit from proper labeling and ARIA practices (aria-checked, role="radio", aria-labelledby).

Figma & Tailwind Integration

Figma:
Component includes states: default, checked, disabled, error
Supports dark/light mode via style tokens
Uses Auto Layout: smart alignment between radio and label/sublabel
Variants for stacked/inline layouts, with/without description
Tailwind:
Layout: inline-flex items-center gap-2
Dot styling: peer-checked:bg-primary-500, rounded-full border
Focus: focus-visible:ring-2 ring-offset-2
Responsive variants: sm:gap-1, lg:w-5
Tokens are shared with other input elements for consistency.

Best Implementation Practices

Use when only one option should be active in a group
Always pair with labels; avoid blank states
Don't use radios for toggle behavior — use switch or button
Avoid auto-selecting unless there's a logical default
Ensure proper spacing for readability and interaction
Integrate with Figma's variant system for design consistency