Radio

Installation

Download the React source package, install its dependencies, and import the component with its shared styles.

'use client';
import '@helios-ui/react/styles.css';
import{NativeScope,NativeRadioExample}from'@helios-ui/react';
export function Example(){return <NativeScope><NativeRadioExample/></NativeScope>}

Sizes

Two sizes via the size prop - md (16px, the default) and sm (14px, the compact glyph used inside menus), paired with Body 2 labels.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="radio" id="sizes"/>}

Radio card

Selectable card with a title and optional description - the whole card selects the radio, matching Checkbox Card's surface. Cards live inside a RadioGroup for single selection and arrow-key navigation. This component is included in the Helios UI React source package.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="radio" id="card"/>}

In menu rows

Menu rows that act as a radio group (like the Dropdown component's model picker) manage selection on the row itself, so they render the bare RadioDot glyph - presentation only, no nested focusable control.

'use client';
import '@helios-ui/react/styles.css';
import{BoardNativeSectionExample}from'@helios-ui/react';
export function Example(){return <BoardNativeSectionExample slug="radio" id="menu-rows"/>}