TkxRadio

import { TkxRadio } from 'tekivex-ui';

Single choice from a group

Shipping speed — single choice from a group

Eco — 5–7 days (free)

Standard — 2–3 days ($4.99)

Express — next day ($14.99)

Selected: standard

const [speed, setSpeed] = useState('standard');

<TkxRadio name="speed" value="eco"      checked={speed === 'eco'}      onChange={() => setSpeed('eco')}      label="Eco — 5–7 days" />
<TkxRadio name="speed" value="standard" checked={speed === 'standard'} onChange={() => setSpeed('standard')} label="Standard — 2–3 days" />
<TkxRadio name="speed" value="express"  checked={speed === 'express'}  onChange={() => setSpeed('express')}  label="Express — next day" />

All radios in a group share the same name prop. Keyboard arrows cycle through siblings (roving tab-index).

With disabled option

Free

Pro — $9/mo

Enterprise — contact sales

Color schemes

primary

success

warning

danger

Props

Prop	Type	Required	Description
`label`	`ReactNode`
`hint`	`string`
`size`	`'sm' \| 'md' \| 'lg'`
`colorScheme`	`'primary' \| 'success' \| 'danger'`

Accessibility

Keyboard navigation supported on all interactive elements
:focus-visible outline at 2px (theme-token primary)
ARIA roles and properties applied per WAI-ARIA 1.2
Respects prefers-reduced-motion
Minimum 44×44 touch target where applicable

Source

The implementation lives at src/components/TkxRadio.tsx.

For a full interactive sandbox where you can change every prop and watch the rendered radio group update in real time, open the playground.