Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { RadioGroup, Radio } from '@marmoui/ui';Examples
Basic Radio Group
Default
Simple radio group with options
<RadioGroup defaultValue="email">
<Radio value="email" label="Email" />
<Radio value="sms" label="SMS" />
<Radio value="push" label="Push Notification" />
</RadioGroup>Best Practices
✓
Always set a default value
Pre-select the most common option to reduce user effort.
✓
Keep options visible
Radio buttons work best when all options are visible without scrolling.
✗
Don't use for binary choices
For yes/no, on/off choices, use a Checkbox or Switch instead.
✗
Don't use for many options
If there are more than 5-7 options, use a Select dropdown.
Props
Props
Accessibility
- Arrow keys navigate between options within the group.
- Space key selects the focused option.
- Uses
role="radiogroup"on the container. - Only the selected radio button is in the tab order.