Radio
Allows the user to select a single option from a group of choices.
Installation
tsx
import { RadioGroup, RadioButton } from "madagent";Default
With Subtitle and Description
Disabled
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | - | Shared name attribute for all radios in the group |
value | string | - | Currently selected value (controlled) |
defaultValue | string | - | Default selected value (uncontrolled) |
disabled | boolean | false | Disables all radios in the group |
legend | string | - | Group label rendered as a legend |
onChange | (value: string) => void | - | Called when the selected value changes |
RTL Support
Components automatically adapt to right-to-left languages using CSS logical properties.
Preview
Usage
tsx
<RadioGroup legend="الخطة" defaultValue="pro">
<RadioButton value="free" label="مجاني" />
<RadioButton value="pro" label="احترافي" />
<RadioButton value="enterprise" label="مؤسسي" />
</RadioGroup>