Skip to main content
Version: Next

Radio

Use Radio for a single radio control or for custom radio sets where you want native-style same-name grouping without the higher-level RadioGroup options API.

Import

import { Radio } from '@editora/ui-react';
// or subpath
import { Radio } from '@editora/ui-react/Radio';

Quick Example

<Radio checked tone="success" onCheckedChange={(checked) => console.log(checked)}>
Publish to subscribers
</Radio>

Same-Name Grouping

<>
<Radio name="plan" value="starter">Starter</Radio>
<Radio name="plan" value="pro" checked>Professional</Radio>
<Radio name="plan" value="enterprise">Enterprise</Radio>
</>

Key Props

PropTypeDefault
checkedbooleanfalse
disabledbooleanfalse
loadingbooleanfalse
invalidbooleanfalse
namestring
valuestring
density'default' | 'compact' | 'comfortable''default'
tone'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'info''brand'
onCheckedChange(checked: boolean, detail) => void

For the full props reference and event detail type, see form-inputs/radio.