Radio

Select a single option from a group.

Core Examples

Accessible React components with Base UI and Yumma CSS.

Base

Standard implementation with default configuration.


Description

Includes a secondary descriptive text below the label.


Disabled

Prevents interaction with reduced visual emphasis.


Shape Examples

Shapes from sharp to fully rounded.

Square

Applies sharp corners with no br-(value).


Squircle

Applies a smooth continuous curve between adjacent corners.


Size Examples

Sizes from large to small.

Large


Medium


Small


More Examples

Additional variants and interactive states.

Icon Leading

Positions an icon before the label text.


Icon Trailing

Positions an icon after the label text.


Static

Renders without motion wrappers or interactive animations.