defaultValue- Type
string- Default
- -
- Description
- Initially selected value (uncontrolled).
Components / Inputs
Radio Group
வானொலி குழு
Radio groups let users select exactly one option from a set. Use them when all options need to be visible simultaneously and only one can be chosen.
வானொலி குழுக்கள் பயனர்களை ஒரு தொகுப்பிலிருந்து சரியாக ஒரு விருப்பத்தை தேர்ந்தெடுக்க அனுமதிக்கின்றன.
Basic radio group
Component preview
Service category selectionசேவை வகை தேர்வுHorizontal layout
Component preview
Gender selectionபாலின தேர்வுAnatomy
Structure
Anatomy
3 parts documented for implementation and review.
1
RadioGroup
வானொலி குழுrequired<div>Root container with role=radiogroup managing selection. Wraps all RadioGroupItem+Label pairs. Uses flex with gap for spacing. Arrow keys cycle through items. Only one can be selected.
2
RadioGroupItem
வானொலி உருப்படிrequired<button>Individual toggle with role=radio. 16x16px circle, shows filled dot when selected using brand color. Arrow keys navigate between group items. Space selects.
3
Label
பெயர்ச்சீட்டுrequired<label>Clickable text paired via htmlFor. Clicking selects the radio. Text-sm (14px). For Tamil, apply font-tamil. Labels should clearly differentiate each option.
API
Props
value- Type
string- Default
- -
- Description
- Controlled selected value.
onValueChange- Type
(value: string) => void- Default
- -
- Description
- Fired when selection changes.
disabled- Type
boolean- Default
false- Description
- Disables all items in the group.
orientation- Type
"horizontal" | "vertical"- Default
"vertical"- Description
- Direction of keyboard navigation.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | - | Initially selected value (uncontrolled). |
value | string | - | Controlled selected value. |
onValueChange | (value: string) => void | - | Fired when selection changes. |
disabled | boolean | false | Disables all items in the group. |
orientation | "horizontal" | "vertical" | "vertical" | Direction of keyboard navigation. |
Usage guidance
- Use radio groups when only one option can be selected. For multiple selections, use Checkbox.
- Always show all options — never hide radio options behind a "more" button.
- Tamil labels should use
font-tamilon theLabelcomponent. - Minimum 2 options; maximum 7. More than 7 — consider a Select instead.
Best practices
Always pair RadioGroupItem with a visible Label via htmlFor
RadioGroupItem-ஐ எப்போதும் htmlFor மூலம் தெரியும் Label-உடன் இணைக்கவும்
Each radio item must have a visible text label linked via htmlFor so clicking the label also selects the option and screen readers can announce the choice.
ஒவ்வொரு வானொலி உருப்படியும் htmlFor மூலம் இணைக்கப்பட்ட தெரியும் உரை பெயர்ச்சீட்டு வேண்டும் — label-ஐ கிளிக் செய்வதும் விருப்பத்தை தேர்ந்தெடுக்கும்.
Don't use RadioGroup for binary yes/no choices
இரண்டு விருப்பங்கள் உள்ள ஆம்/இல்லை தேர்வுகளுக்கு RadioGroup பயன்படுத்தாதே
For a single binary toggle (yes/no, on/off), use a Switch or Checkbox instead — RadioGroup adds unnecessary markup for two-option decisions.
ஒரு இரட்டை நிலை தேர்வுக்கு (ஆம்/இல்லை), Switch அல்லது Checkbox பயன்படுத்தவும் — RadioGroup இரண்டு விருப்பங்களுக்கு தேவையற்ற குறியீட்டை சேர்க்கிறது.
Pre-select a sensible default option
அர்த்தமுள்ள இயல்புநிலை விருப்பத்தை முன்கூட்டியே தேர்ந்தெடுக்கவும்
Use defaultValue to pre-select the most common or safest option — it reduces cognitive load and speeds up form completion.
மிகவும் பொதுவான அல்லது பாதுகாப்பான விருப்பத்தை முன்கூட்டியே தேர்ந்தெடுக்க defaultValue பயன்படுத்தவும் — இது அறிவுசார் சுமையை குறைக்கிறது.
Don't use more than 7 options in a RadioGroup
RadioGroup-ல் 7-க்கும் அதிக விருப்பங்கள் வைக்காதே
More than 7 radio options overwhelm users — switch to a Select (dropdown) which handles long lists more efficiently.
7-க்கும் அதிக வானொலி விருப்பங்கள் பயனர்களை அதிகமாக்குகின்றன — நீண்ட பட்டியல்களை திறம்பட கையாளும் Select (dropdown) பயன்படுத்தவும்.