Radio Group

Single-select control group with radio items. Features multiple orientations, sizes, and states including disabled.

Figma: DS-001 Foundations · 65:341

Import

Live Demo

Single-select controls in horizontal and vertical layouts.

Default type — label only

Default type — with description

Use the system default settings for this option.

More spacing and larger text for better readability.

Reduced spacing to fit more content on screen.

Box type — with description

Perfect for small businesses getting started with our platform

Advanced features for growing businesses with higher demands

Custom solutions for large organizations

Control placement — end

Box type — control placement end

This plan includes basic features and standard support.

This plan includes advanced features and priority support.

Disabled

Disabled — box type

Perfect for small businesses getting started with our platform

Advanced features for growing businesses with higher demands

Invalid

Invalid — box type

Perfect for small businesses getting started with our platform

Advanced features for growing businesses with higher demands

Single radio button states

This is a radio description.

This is a radio description.

Props

NameTypeDefaultDescription
valuestringCurrently selected value
orientation"horizontal" | "vertical""vertical"Layout direction of the radio group

Examples

Basic Radio Group