रेडियो बटन

श्रेणी: चयन
टोकन: comp.radio-button
स्तर: आधार
इनमें उपयोग: Radio group

अवलोकन

Web: tanrei-radio-button; schedule
SwiftUI: TanreiRadioButton; schedule
Jetpack Compose: TanreiRadioButton; schedule
Flutter: TanreiRadioButton; schedule
React Native: RadioButton; schedule

इससे जनरेट किया गया: docs/status/status.json, specs/radio-button.spec.json

एक ग्रुप

इस्तेमाल

जिस संशोधन ने रेडियो बटन को उसके मौजूदा साइज़ और मोटी होकर फ़िल बन जाने वाली रिंग दी, उसने सिर्फ़ यह बदला कि वह कैसा दिखता और कैसे चलता है, इसलिए नीचे का हर उदाहरण मौजूदा है। वेब इसे वैसे ही बनाता है जैसा स्पेक कहता है। SwiftUI, Compose, Flutter और React Native पीछे हैं: जब तक वे बराबरी पर नहीं आते, वे पिछला रेडियो बटन ही बनाते हैं, यानी 28 की स्टेट लेयर में बारीक स्ट्रोक वाली 16 की रिंग और 8 का बिंदु, और लेआउट में 48 की टार्गेट ऊँचाई के लिए जगह नहीं रखते। उसके बाद का एक सुधार अभी सिर्फ़ वेब पर है: रिंग और फ़िल एक ही शेप के रूप में बनते हैं।

<!-- एक ही name वाले विकल्प एक ग्रुप बनाते हैं। ग्रुप का नाम उन्हें घेरने वाले एलिमेंट से आता है। -->
<div role="radiogroup" aria-labelledby="frequency-label">
  <span id="frequency-label">कितनी बार</span>
  <tanrei-radio-button name="frequency" value="daily" label="रोज़"></tanrei-radio-button>
  <tanrei-radio-button name="frequency" value="weekly" checked label="हर हफ़्ते"></tanrei-radio-button>
  <tanrei-radio-button name="frequency" value="monthly" label="हर महीने"></tanrei-radio-button>
</div>

<script type="module">
  import '@tanrei/web/components/radio-button';
  // change सिर्फ़ वही विकल्प फ़ायर करता है जो चयनित हुआ; जिसकी जगह उसने ली, वह नहीं।
  document.querySelector('[role="radiogroup"]').addEventListener('change', (e) => save(e.detail.value));
</script>

import { RadioButton } from '@tanrei/react';

<div role="radiogroup" aria-labelledby="frequency-label">
  <span id="frequency-label">कितनी बार</span>
  {options.map(({ value, label }) => (
    <RadioButton
      key={value}
      name="frequency"
      value={value}
      label={label}
      checked={frequency === value}
      onChange={(e) => setFrequency(e.detail.value)}
    />
  ))}
</div>

import Tanrei

// selection एक Binding<Frequency?> है: विकल्प तब तक चयनित है जब तक वह उसके value के बराबर है।
TanreiRadioGroup("कितनी बार") {
  TanreiRadioButton("रोज़", value: Frequency.daily, selection: $frequency)
  TanreiRadioButton("हर हफ़्ते", value: Frequency.weekly, selection: $frequency)
  TanreiRadioButton("हर महीने", value: Frequency.monthly, selection: $frequency)
}

import androidx.compose.foundation.selection.selectableGroup
import io.github.chnotchy.tanrei.components.TanreiRadioButton

// पैरेंट ग्रुप बनाता है; हर विकल्प का onClick अपना मान कैप्चर करता है।
Column(Modifier.selectableGroup()) {
    for ((value, label) in listOf("daily" to "रोज़", "weekly" to "हर हफ़्ते", "monthly" to "हर महीने")) {
        TanreiRadioButton(selected = frequency == value, onClick = { frequency = value }, label = label)
    }
}

import 'package:tanrei/tanrei.dart';

TanreiRadioGroup<Frequency>(
  groupValue: frequency,
  onChanged: (Frequency value) => setState(() => frequency = value),
  semanticLabel: 'कितनी बार',
  child: Column(
    children: <Widget>[
      for (final Frequency option in Frequency.values)
        TanreiRadioButton<Frequency>(value: option, label: option.label),
    ],
  ),
);

import { RadioButton, RadioGroup } from '@tanrei/react-native';

<RadioGroup accessibilityLabel="कितनी बार">
  {options.map(({ value, label }) => (
    <RadioButton key={value} value={value} label={label} selected={frequency === value} onSelect={setFrequency} />
  ))}
</RadioGroup>

स्पेक

चयनित, अचयनित और अक्षम

डिफ़ॉल्ट सिस्टम में रेडियो बटन 40 की गोल स्टेट लेयर पर 2 के स्ट्रोक वाली 20 की रिंग है। चयनित विकल्प कोई बिंदु नहीं बनाता। उसकी रिंग भीतर की ओर आधे रेडियस तक मोटी हो जाती है, और भीतर बची डिस्क रिंग के रंग से 16 % ओपैसिटी पर भरी जाती है: एक हल्की आभा, जो रिंग से कम से कम 3:1 अलग रहती है। रिंग दोनों अवस्थाओं में अपना बाहरी साइज़ बनाए रखती है। रिंग और फ़िल एक ही शेप हैं: किसी भी ज़ूम या डिस्प्ले डेंसिटी पर, या बदलाव के किसी भी फ़्रेम में, रेडियो बटन के पीछे की कोई चीज़ उनके बीच से नहीं झाँकती। जब चयन बदलता है, तो स्ट्रोक मोटा या पतला होता है, जबकि रिंग का रंग बदलता है और फ़िल फ़ेड होकर आता या जाता है; फ़िल कभी केंद्र से नहीं बढ़ता। जो बदलाव मोशन ख़त्म होने से पहले आता है, वह जहाँ है वहीं से वापस मुड़ता है, और जहाँ मोशन कम किया गया है, वहाँ नई अवस्था तुरंत और पूरी दिखती है।

हर विकल्प लेआउट में कम से कम 48 की ऊँचाई लेता है, जो टार्गेट का साइज़ है, और स्टेट लेयर उसमें बीच में रहती है। इसलिए बिना गैप के ऊपर-नीचे रखे विकल्प कभी टार्गेट एरिया साझा नहीं करते। जो प्रॉडक्ट अपने विकल्पों को ज़्यादा कसकर रखता है, वह अपनी लेयर में option.min-height घटाता है और यह स्वीकार करता है कि टार्गेट एक-दूसरे पर चढ़ेंगे।

m3-like में चयनित विकल्प Material की रिंग, गैप और बिंदु बनाए रखता है, पर बिंदु केंद्र से स्केल होकर आने के बजाय फ़ेड होकर आता है। cupertino में रेडियो बटन अपना छोटा साइज़ बनाए रखता है और Apple वाला रूप बनाता है: पतली रिंग में एक हल्की डिस्क, और चयनित होने पर हल्के केंद्र के चारों ओर एक टिंट वाली पट्टी।

संरचना

वेब पैकेज जिस तरह फ़िक्स्चर unselected बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 `container`	The round state layer behind the ring. It carries hover, focus and press and is invisible at rest.
2 `ring`	The circle that shows there is an option. Its outer diameter never changes; its stroke is thin while unselected and thickens inward, towards the center, while selected.
3 `fill` · वैकल्पिक	What the ring leaves inside it, less an inset, tinted while selected (translucent in the default system) and clear while unselected. Where the inset is nothing it meets the ring's inner edge with no gap: ring and fill are drawn as one shape. It never grows or shrinks on its own, and it is never what carries the selection: the thickened ring is.
4 `label` · वैकल्पिक	The visible text that names the option. A click on it selects the option.
5 `focus-ring`	Gap-then-ring indicator shown for keyboard focus, around the ring.

माप

लंबाई	टोकन	मान (px)
`container` size	`tanrei.comp.radio-button.container.size`	40
`ring` size	`tanrei.comp.radio-button.ring.size`	20

वेब पैकेज जिस तरह फ़िक्स्चर unselected बनाता है, उसी के ऊपर बनाया गया।

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
`checked`	`boolean`	`false`	Whether this option is the one chosen in its group. Inside a radio group it follows the group's value.
`value`	`string`	`""`	What this option stands for: carried by change, and submitted with a form on the web.
`name`	`string`	`""`	The group this option belongs to where it does not stand in a radio group: on each platform that platform's bare way of forming a group (see platforms); the options of one group exclude each other and share one tab stop. Ignored inside a radio group, which is the group.
`disabled`	`boolean`	`false`	Prevents interaction; the option is skipped by the focus order and by the arrow keys.
`readOnly`	`boolean`	`false`	The person cannot select this option: it can still be focused and read, and the arrow keys still reach it, but a press, Space or an arrow key that lands on it selects nothing. Drawn as an enabled option, without the hover and press answers. A radio group that is read-only makes each of its options so (RAD-28).
`error`	`boolean`	`false`	Draws the option in the error form of its condition: the ring, and the fill while selected, in the error color (a required group left unanswered, a choice that cannot be taken). A radio group or a field group in error puts every option it holds there, so set it by hand only on options grouped without one (RAD-25). It draws and nothing more: the group, not the option, is exposed as invalid, and the words that say why are the group's.
`label`	`string`	`""`	The text that names the option: drawn next to the ring and used as the accessible name.
`labelHidden`	`boolean`	`false`	Draws no visible label but keeps label as the accessible name.

इवेंट

इवेंट	विवरण
`change`	This option became selected by the user; carries its value. The option it replaced does not emit. Inside a radio group the group emits change in its place (RGP-4).

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
`RAD-1`	WHEN the user activates an unselected radio button by pointer, touch, Space, assistive technology or a click on its label THE radio button SHALL become selected and emit change exactly once with its value; Enter SHALL activate it only on a platform whose convention activates any focused control with Enter (Android, tvOS), and SHALL NOT on the web, where Enter submits the form.
`RAD-2`	WHEN the user activates a radio button that is already selected THE radio button SHALL stay selected and SHALL NOT emit change: a radio button is never cleared by its own activation.
`RAD-3`	WHEN a radio button becomes selected THE other radio buttons of its group SHALL become unselected, without emitting change.
`RAD-4`	WHEN a radio button in a group has keyboard focus and the user presses Down Arrow or Right Arrow THE group SHALL move focus to the next enabled radio button, wrapping from the last to the first, and select it; Up Arrow and Left Arrow SHALL do the same towards the previous one; in a right-to-left layout Right Arrow SHALL move to the previous and Left Arrow to the next.
`RAD-5`	THE group SHALL keep exactly one of its radio buttons in the tab order: the selected one, or the first enabled one while none is selected; Tab SHALL leave the group rather than move within it.
`RAD-6`	WHILE disabled is true THE radio button SHALL NOT change or emit change, SHALL NOT be focusable, SHALL be skipped by the arrow keys, SHALL ignore clicks on its label and SHALL expose the disabled state to assistive technology.
`RAD-7`	WHILE hovered, keyboard-focused or pressed THE radio button SHALL render its container, ring, fill, label and opacity from the component tokens of its condition (selected or unselected, or the error- form of either, RAD-26) in the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. A part the interaction states recolor changes over the component's state motion, as the container does; only a change of condition uses the selection motion (RAD-15).
`RAD-8`	WHEN the radio button receives keyboard focus THE radio button SHALL show the focus ring around its ring without animation; focus gained by pointer or touch SHALL NOT show it.
`RAD-9`	WHERE the visual size is below the minimum target THE radio button SHALL extend its hit area on both axes to sys.target.touch for touch input and sys.target.pointer for fine pointers, without changing its visual size; a platform that cannot tell the input type SHALL use sys.target.touch. The visible label SHALL be part of the hit area as well.
`RAD-10`	WHILE disabled is true THE radio button SHALL render its container, ring, fill, label and opacity from the disabled component tokens of its condition.
`RAD-11`	WHEN the radio button is pressed by pointer, touch or Space, or by Enter where Enter activates it (Android, tvOS; never on the web, where Enter submits the form) THE radio button SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner.
`RAD-12`	WHILE pressed THE radio button SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation; a press outside the container (on the label) grows it from the container's center); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; ring, fill, label, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.radio-button.motion.feedback-duration with motion.state-easing, fades over motion.state-duration with motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
`RAD-13`	THE radio button SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
`RAD-14`	THE radio button SHALL draw a ring of outer diameter comp.radio-button.ring.size centered in a round container of diameter comp.radio-button.container.size, the outer diameter the same in both conditions; while unselected the ring SHALL be stroked at comp.radio-button.ring.width inside that diameter, and while selected at comp.radio-button.ring.selected-width-share of the ring's radius (1 being a stroke as wide as the radius, a solid disc), or at comp.radio-button.ring.width where that is wider, the stroke growing inward from the outer diameter. It SHALL draw no dot of its own; what is drawn inside the ring is the fill (RAD-19).
`RAD-15`	WHEN the radio button becomes selected THE radio button SHALL, over comp.radio-button.motion.selection-duration with comp.radio-button.motion.selection-easing, thicken the ring's stroke inward from its unselected to its selected width, change the ring color from the unselected to the selected one, and run the fill's color continuously from comp.radio-button.unselected.fill.color (none in the default system) to comp.radio-button.selected.fill.color, fading the opacity in from none rather than passing through any other color; WHEN it becomes unselected it SHALL run the same change in reverse; the fill SHALL NOT grow from or shrink to the center; WHERE motion is reduced it SHALL show the new condition at once and in full, with no intermediate frame.
`RAD-16`	THE radio button SHALL expose the role radio with the state checked or not checked, and its position in its group and the group's size; THE group SHALL be exposed as a radio group: the radio group component, named by its label (RGP-10), or, where the options are grouped without one (RAD-25), a container whose accessible name the product gives.
`RAD-17`	WHILE label is not empty and labelHidden is false THE radio button SHALL draw label at the inline end of the container, comp.radio-button.label.gap away, in comp.radio-button.label.typescale, wrapping rather than truncating, the control centered on the label's first line; right-to-left layouts SHALL mirror the order.
`RAD-18`	WHILE labelHidden is true THE radio button SHALL draw no label and SHALL still expose label as its accessible name; WHILE label is not empty, or a Field that frames it gives it a label, THE radio button SHALL expose that label as its accessible name, over a name the product gives it on the element (aria-label or aria-labelledby); WHILE label is empty and the product gives the radio button a name of its own on the element — aria-label, or aria-labelledby naming an element — THE radio button SHALL expose that name as its accessible name; WHILE label is empty and the product gives it none THE radio button SHALL still render, and in debug builds report that it has no accessible name.
`RAD-19`	THE radio button SHALL draw the fill in both conditions: the area inside the ring's inner edge at that moment, less comp.radio-button.fill.inset all round, never under the ring, in the fill color of its condition and state (comp.radio-button.selected.fill.color or comp.radio-button.unselected.fill.color at rest, and comp.radio-button.error-selected.fill.color or comp.radio-button.error-unselected.fill.color in the error forms, RAD-26; an unselected one is none in the default system, so an unselected option shows no fill there) at comp.radio-button.fill.opacity; a fill whose diameter would be zero or less SHALL NOT be drawn.
`RAD-20`	WHEN the condition changes again before the selection motion of RAD-15 has finished THE radio button SHALL turn the change back from the stroke width and the ring and fill colors it has reached, and SHALL NOT jump to either end.
`RAD-21`	THE radio button SHALL take at least comp.radio-button.option.min-height of height in layout, the container centered in it; at its default, sys.target.touch, radio buttons stacked with no space between them keep whole targets that do not overlap, and a layer that lowers it accepts shared target area.
`RAD-22`	THE radio button SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the radio button is shown THE radio button SHALL draw itself for the new direction at once, without a motion of its own, keeping its selection and its focus.
`RAD-23`	THE radio button SHALL lay out its label as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right word, a number with its sign or unit, a telephone number and an address keep their own order in a right-to-left layout and reorder nothing beside them; THE radio button SHALL still place the label and align its lines by the layout direction, not by the text's own.
`RAD-24`	WHILE comp.radio-button.fill.inset is 0 (the default system's) THE radio button SHALL draw the ring and the fill as one shape: every point inside the ring's outer diameter SHALL be painted by the ring, by the fill, or, along the circle where the two meet, by both in shares that add up to the whole, so that nothing behind the radio button shows between the ring's inner edge and the fill at any zoom, display density or fractional position, or in any frame of the selection motion (RAD-15); neither SHALL be painted over the other (RAD-19), so that the fill is nowhere more or less opaque than comp.radio-button.fill.opacity makes it. WHILE comp.radio-button.fill.inset is above 0 the space it leaves between the ring and the fill SHALL show what is behind the radio button, as wide as the inset all round.
`RAD-25`	WHILE the radio button stands in a radio group THE radio button SHALL take its group from it and from nothing else: checked SHALL follow the radio group's value and its own value (RGP-3), name SHALL be ignored, it SHALL be disabled WHILE the radio group is (RGP-7), and its selection by the person SHALL be reported by the radio group's change and by no event of its own that a listener on the group would receive as well (RGP-4). WHERE the radio button stands in no radio group it SHALL form its group by the platform's bare idiom — on the web the radio buttons of one name in the same form, or in the same document or shadow root outside a form — and RAD-3, RAD-4, RAD-5 and RAD-16 SHALL hold among those, the group's name, its required and invalid states and its layout being the product's, or those of a field group whose kind is radio-group that the product put around them (FGR-25). A radio button in no group at all SHALL still render and be selectable, as a group of one, and in debug builds SHALL report it where the platform can tell (on the web, a radio button with neither a radio group nor a name).
`RAD-26`	THE radio button SHALL draw the condition its props select — selected WHILE checked is true, otherwise unselected — and the error- form of that condition (error-selected, error-unselected) WHILE it is in error: WHILE error is true, or WHILE the radio group or the field group it stands in is in error and has put it there (RGP-8, FGR-8), as a checkbox draws the error- form of its condition (CHK-4). In an error form THE radio button SHALL render its container, ring, fill, label and opacity from the component tokens of that form in every state — at rest, hovered, focused and pressed with the precedence of RAD-7, and disabled as RAD-10 says — and SHALL change nothing else: the ring's diameter and its stroke in each condition (RAD-14), the fill's inset and opacity (RAD-19), the label, the focus indication (RAD-8), the hit area (RAD-9) and the selection motion (RAD-15), which runs between the two error forms' colors, are those of the same condition out of error. WHILE disabled is true the disabled tokens of the error form apply, which in the default system are the values of the plain form's: a disabled option shows no error color, because it cannot be the answer that puts the error right. WHEN the radio button enters or leaves the error forms without a change of selection THE radio button SHALL only recolor its ring and its fill, over comp.radio-button.motion.selection-duration with comp.radio-button.motion.selection-easing, and at once WHERE motion is reduced; nothing SHALL change size or move. THE radio button SHALL expose no invalid state and take no description for the error: the radio role has no such state, the group the options form carries it and the words that say why (RAD-16, RGP-10, FGR-25), and an option that repeated them would say the error once for every arrow key. It SHALL never set error itself, and being selected SHALL NOT clear it. WHERE the options are grouped without a radio group or a field group (RAD-25) error is the product's to set, on every option of the group together with the invalid state of the group it built.
`RAD-27`	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE radio button SHALL draw each error form exactly as it draws the same condition out of error there — its ring in the platform's own colors, the stroke's weight carrying the selection — and SHALL show no error color, because the person's colors leave none to show: the error is carried by the words of the group's error text and by the group's invalid state (RGP-14, FGR-17).
`RAD-28`	WHILE readOnly is true and disabled is false, or WHILE the radio group it stands in is read-only (RGP-20), THE radio button SHALL stay focusable, keep its place in its group's single tab stop (RAD-5) and be reached by its group's arrow keys (RAD-4); SHALL NOT become selected, and SHALL NOT emit change, on any activation — pointer, touch, Space, Enter where Enter activates it, assistive technology, a click on its label, a click dispatched on the element or an arrow key that moves focus to it — so that an arrow key moves focus to it and selects nothing, and from it moves focus on as RAD-4 says, selecting the option it lands on only where that option is not read-only; and SHALL be drawn from the resting component tokens of its condition — the enabled ones, never the disabled ones — and SHALL show no hovered and no pressed state, under any pressed feedback (no overlay, no ripple, no dim), while keyboard focus still selects the focused state and shows the focus ring (RAD-7, RAD-8). The radio role has no read-only state: the group says it — the radio group (RGP-20), or, where options are grouped without one (RAD-25), the container the product gives them. The product may still set checked. WHILE disabled is true as well, disabled wins (RAD-6).
`RAD-29`	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE radio button SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role — an id reference by the elements it names in the host's tree or a tree around it, an error message as part of the description while the radio button is invalid — except those the radio button owns (aria-checked, aria-pressed, aria-disabled), which it SHALL move and not expose. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE radio button SHALL take it off that element. WHEN the product sets an aria- attribute the radio button owns THE radio button SHALL report it in debug builds.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	`tanrei-radio-button`	`TanreiRadioButton`	`TanreiRadioButton`	`TanreiRadioButton`	`RadioButton`
`checked` · प्रॉपर्टी	`checked`	`selection`	`selected`	`groupValue`	`selected`
`value` · प्रॉपर्टी	`value`	`value`	`onClick`	`value`	`value`
`name` · प्रॉपर्टी	`name`	`TanreiRadioGroup`	`selectableGroup`	`TanreiRadioGroup`	`RadioGroup`
`disabled` · प्रॉपर्टी	`disabled`	`disabled`	`enabled`	`enabled`	`disabled`
`readOnly` · प्रॉपर्टी	`readOnly`	`readOnly`	`readOnly`	`readOnly`	`readOnly`
`error` · प्रॉपर्टी	`error`	`isError`	`isError`	`isError`	`error`
`label` · प्रॉपर्टी	`label`	`title`	`label`	`label`	`label`
`labelHidden` · प्रॉपर्टी	`labelHidden`	`labelsHidden`	`labelHidden`	`labelHidden`	`labelHidden`
`change` · इवेंट	`change`	`selection`	`onClick`	`onChanged`	`onSelect`
टिप्पणियाँ	Form-associated, with the native radio's idiom: a group is the options with one `name` under the same form (or the same root without a form); the options manage the arrow keys and the single tab stop among themselves. A `tanrei-radio-group` is the usual group: inside one the option needs no `name`, takes `checked`, its tab stop and its position from the group and submits nothing itself (RAD-25). Options grouped by `name` alone are wrapped by the product in an element with role radiogroup and a name. `labelHidden` is the `label-hidden` attribute. `error` is a reflected boolean attribute. The option asks the frame around it as a checkbox does (`FieldControlController` with `errorCondition: true`, `takes: 'all'`), and draws its error form while `error` or the frame's `invalid` holds (`data-error` on `.root`); it writes no `aria-invalid`, and in a group in error it takes no description from the group's frame — it names itself, and its group says the error (RAD-26); alone in a Field it takes its name and description from the Field as any control does. Under `forced-colors: active` the error forms are the plain ones (RAD-27). `readOnly` is the `readonly` attribute (HTML's name; the native attribute does not apply to a radio button, so the option cancels the activation itself and writes no ARIA state, the radio role having none). In a `tanrei-radio-group` it is also read-only while the group is, without its own `readOnly` changing.	`TanreiRadioButton(_ title:, value: V, selection: Binding<V?>)`: checked is `selection == value`, and activation writes `value` to the binding, which is the change event. SwiftUI has no radio group on iOS, so `TanreiRadioGroup` (a container with no tokens) carries the group's name, the arrow keys and the position announcements; it is the radio group component (`radio-group`), which adds the frame and holds the selection. Lagging: it draws a 16 ring with a 1 stroke and an 8 dot in a 28 state layer, not this spec's ring and dot. The error condition (`isError`, the error forms of RAD-26 and RAD-27, set by `TanreiRadioGroup` in error through the environment) is not built on this platform yet.	Compose idiom, as `RadioButton`: the caller passes `selected` and an `onClick` that captures the option's value; the parent forms the group with `Modifier.selectableGroup()`, which a `TanreiRadioGroup` (`radio-group`) applies itself. `enabled` is the inverse flag. Lagging: it draws a 16 ring with a 1 stroke and an 8 dot in a 28 state layer, not this spec's ring and dot. The error condition (`isError`, the error forms of RAD-26 and RAD-27, given by a `TanreiRadioGroup` in error through its composition local) is not built on this platform yet.	Flutter idiom: `TanreiRadioButton<T>(value:)` inside a `TanreiRadioGroup<T>(groupValue:, onChanged:, semanticLabel:)` ancestor, shaped like Flutter's `RadioGroup` (3.35), which the package's minimum Flutter (3.32) lacks and whose name it must not take; checked is `groupValue == value`. The group carries the arrow keys, the single Tab stop and the radio-group semantics; it is the radio group component (`radio-group`), which adds the frame. `enabled` is the inverse flag, as Flutter's radio has since `RadioGroup` replaced the per-radio `onChanged`. Lagging: it draws a 16 ring with a 1 stroke and an 8 dot in a 28 state layer, not this spec's ring and dot. The error condition (`isError`, the error forms of RAD-26 and RAD-27, given by a `TanreiRadioGroup` in error through its inherited scope) is not built on this platform yet.	Controlled: `onSelect(value)` fires and the caller moves `selected`. React Native has no group idiom, so a `RadioGroup` parent (no tokens) carries the radiogroup role, its name and the arrow keys where a keyboard exists; it is the radio group component (`radio-group`), which adds the frame and holds the value. Lagging: it draws a 16 ring with a 1 stroke and an 8 dot in a 28 state layer, not this spec's ring and dot. The error condition (`error`, the error forms of RAD-26 and RAD-27, given by a `RadioGroup` in error through its context) is not built on this platform yet.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
`--tanrei-comp-radio-button-container-shape`	`sys.shape.corner.full`	9999px
`--tanrei-comp-radio-button-container-size`	—	40px
`--tanrei-comp-radio-button-disabled-container-shape`	—	9999px
`--tanrei-comp-radio-button-disabled-opacity`	—	1
`--tanrei-comp-radio-button-error-selected-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-selected-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-selected-disabled-fill-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-selected-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-selected-disabled-ring-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-selected-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-selected-fill-color`	`comp.radio-button.error-selected.ring.color`	#cd262f
`--tanrei-comp-radio-button-error-selected-focused-container-color`	—	#cd262f · 10%
`--tanrei-comp-radio-button-error-selected-focused-fill-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-focused-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-error-selected-focused-ring-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-focused-state-layer-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-hovered-container-color`	—	#cd262f · 8%
`--tanrei-comp-radio-button-error-selected-hovered-fill-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-hovered-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-error-selected-hovered-ring-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-hovered-state-layer-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-radio-button-error-selected-pressed-container-color`	—	#cd262f · 10%
`--tanrei-comp-radio-button-error-selected-pressed-fill-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-pressed-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-error-selected-pressed-ring-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-pressed-state-layer-color`	—	#cd262f
`--tanrei-comp-radio-button-error-selected-ring-color`	`sys.color.error`	#cd262f
`--tanrei-comp-radio-button-error-selected-state-layer-color`	`comp.radio-button.error-selected.ring.color`	#cd262f
`--tanrei-comp-radio-button-error-unselected-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-disabled-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-unselected-disabled-ring-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-unselected-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-error-unselected-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-focused-container-color`	—	#cd262f · 10%
`--tanrei-comp-radio-button-error-unselected-focused-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-focused-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-error-unselected-focused-ring-color`	—	#cd262f
`--tanrei-comp-radio-button-error-unselected-focused-state-layer-color`	—	#cd262f
`--tanrei-comp-radio-button-error-unselected-hovered-container-color`	—	#cd262f · 8%
`--tanrei-comp-radio-button-error-unselected-hovered-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-hovered-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-error-unselected-hovered-ring-color`	—	#cd262f
`--tanrei-comp-radio-button-error-unselected-hovered-state-layer-color`	—	#cd262f
`--tanrei-comp-radio-button-error-unselected-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-radio-button-error-unselected-pressed-container-color`	—	#cd262f · 10%
`--tanrei-comp-radio-button-error-unselected-pressed-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-error-unselected-pressed-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-error-unselected-pressed-ring-color`	—	#cd262f
`--tanrei-comp-radio-button-error-unselected-pressed-state-layer-color`	—	#cd262f
`--tanrei-comp-radio-button-error-unselected-ring-color`	`sys.color.error`	#cd262f
`--tanrei-comp-radio-button-error-unselected-state-layer-color`	`comp.radio-button.error-unselected.ring.color`	#cd262f
`--tanrei-comp-radio-button-fill-inset`	—	0px
`--tanrei-comp-radio-button-fill-opacity`	`sys.state.selected-state-layer-opacity`	0.16
`--tanrei-comp-radio-button-focused-container-shape`	—	9999px
`--tanrei-comp-radio-button-focused-opacity`	—	1
`--tanrei-comp-radio-button-hovered-container-shape`	—	9999px
`--tanrei-comp-radio-button-hovered-opacity`	—	1
`--tanrei-comp-radio-button-label-gap`	`sys.space.space50`	4px
`--tanrei-comp-radio-button-motion-feedback-duration`	`sys.motion.role.feedback`	450ms
`--tanrei-comp-radio-button-motion-selection-duration`	`sys.motion.role.selection.mark`	250ms
`--tanrei-comp-radio-button-motion-selection-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-radio-button-motion-state-duration`	`sys.motion.role.state.compact`	200ms
`--tanrei-comp-radio-button-motion-state-easing`	`sys.motion.easing.state`	cubic-bezier(0.2, 0, 0, 1)
`--tanrei-comp-radio-button-option-min-height`	`sys.target.touch`	48px
`--tanrei-comp-radio-button-pressed-container-shape`	—	9999px
`--tanrei-comp-radio-button-pressed-opacity`	—	1
`--tanrei-comp-radio-button-ring-selected-width-share`	—	0.5
`--tanrei-comp-radio-button-ring-size`	—	20px
`--tanrei-comp-radio-button-ring-width`	`sys.border.thick`	2px
`--tanrei-comp-radio-button-selected-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-selected-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-selected-disabled-fill-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-selected-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-selected-disabled-ring-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-selected-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-selected-fill-color`	`comp.radio-button.selected.ring.color`	#1b1b1b
`--tanrei-comp-radio-button-selected-focused-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-radio-button-selected-focused-fill-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-focused-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-focused-ring-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-focused-state-layer-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-hovered-container-color`	—	#1b1b1b · 8%
`--tanrei-comp-radio-button-selected-hovered-fill-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-hovered-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-hovered-ring-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-hovered-state-layer-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-radio-button-selected-pressed-container-color`	—	#1b1b1b · 10%
`--tanrei-comp-radio-button-selected-pressed-fill-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-pressed-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-pressed-ring-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-pressed-state-layer-color`	—	#1b1b1b
`--tanrei-comp-radio-button-selected-ring-color`	`sys.color.primary`	#1b1b1b
`--tanrei-comp-radio-button-selected-state-layer-color`	`comp.radio-button.selected.ring.color`	#1b1b1b
`--tanrei-comp-radio-button-unselected-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-disabled-container-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-disabled-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-disabled-label-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-unselected-disabled-ring-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-unselected-disabled-state-layer-color`	—	#1b1b1b · 38%
`--tanrei-comp-radio-button-unselected-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-focused-container-color`	—	#848484 · 10%
`--tanrei-comp-radio-button-unselected-focused-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-focused-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-unselected-focused-ring-color`	—	#848484
`--tanrei-comp-radio-button-unselected-focused-state-layer-color`	—	#848484
`--tanrei-comp-radio-button-unselected-hovered-container-color`	—	#848484 · 8%
`--tanrei-comp-radio-button-unselected-hovered-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-hovered-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-unselected-hovered-ring-color`	—	#848484
`--tanrei-comp-radio-button-unselected-hovered-state-layer-color`	—	#848484
`--tanrei-comp-radio-button-unselected-label-color`	`sys.color.on-surface`	#1b1b1b
`--tanrei-comp-radio-button-unselected-pressed-container-color`	—	#848484 · 10%
`--tanrei-comp-radio-button-unselected-pressed-fill-color`	—	#000000 · 0%
`--tanrei-comp-radio-button-unselected-pressed-label-color`	—	#1b1b1b
`--tanrei-comp-radio-button-unselected-pressed-ring-color`	—	#848484
`--tanrei-comp-radio-button-unselected-pressed-state-layer-color`	—	#848484
`--tanrei-comp-radio-button-unselected-ring-color`	`sys.color.outline`	#848484
`--tanrei-comp-radio-button-unselected-state-layer-color`	`comp.radio-button.unselected.ring.color`	#848484
`--tanrei-comp-radio-button-label-typescale`	`sys.typescale.body`	400 14px/1.5714

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

unselected

value: weekly name: frequency label: Weekly

selected

checked: true value: weekly name: frequency label: Weekly

error-unselected

value: weekly name: frequency error: true label: Weekly

error-selected

checked: true value: weekly name: frequency error: true label: Weekly

disabled-unselected

value: weekly name: frequency disabled: true label: Weekly

disabled-selected

checked: true value: weekly name: frequency disabled: true label: Weekly

label-hidden

checked: true value: weekly name: frequency label: Weekly labelHidden: true

read-only-selected

checked: true value: weekly name: frequency readOnly: true label: Weekly

इससे जनरेट किया गया: specs/radio-button.spec.json, tokens/comp/radio-button.tokens.json, design/tokens/

दिशानिर्देश

कब इस्तेमाल करें

रेडियो बटन तब इस्तेमाल करें जब किसी सवाल का ठीक एक जवाब हो और थोड़े-से विकल्प हों जिनकी लोगों को साथ-साथ तुलना करनी चाहिए, जैसे डिलीवरी की रफ़्तार या सारांश कितनी बार भेजना है। हर विकल्प एक साथ दिखता है, इसलिए ग्रुप जगह लेता है। जब विकल्प बहुत हों, या जगह कम हो, तो ऐसी लिस्ट या मेन्यू इस्तेमाल करें जो सिर्फ़ चुना हुआ विकल्प दिखाए।

जब कोई विकल्प सुरक्षित और संभावित जवाब हो, तो ग्रुप उस विकल्प को चयनित रखकर शुरू हो सकता है। जब आपको व्यक्ति से सोच-समझकर जवाब चाहिए, तो हर विकल्प को अचयनित छोड़ें। एक बार कोई विकल्प चयनित हो जाए, तो व्यक्ति ग्रुप को बिना चयन की अवस्था में वापस नहीं ला सकता, क्योंकि रेडियो बटन अपने ही सक्रिय किए जाने से कभी अचयनित नहीं होता। अगर “कोई नहीं” एक मान्य जवाब है, तो उसे एक विकल्प के रूप में जोड़ें।

चेकबॉक्स, रेडियो बटन या स्विच

कंट्रोल	चुनाव	कब लागू होता है	किसके लिए
चेकबॉक्स	कितने भी स्वतंत्र चुनाव, चाहें तो एक भी नहीं	जब व्यक्ति पुष्टि करता है	फ़ॉर्म के विकल्प, शर्तों से सहमति, पंक्तियाँ चुनना
रेडियो बटन	एक छोटे ग्रुप में से ठीक एक, जिसमें सभी विकल्प दिखते हैं	आम तौर पर जब व्यक्ति पुष्टि करता है	एक सवाल का एक जवाब
स्विच	एक सेटिंग, चालू या बंद	तुरंत	वे सेटिंग जो बदलते ही लागू हो जाती हैं

करें

हर ग्रुप को एक नाम दें: वह सवाल जिसका जवाब उसके विकल्प देते हैं, ग्रुप से पहले दिखने वाले टेक्स्ट के रूप में।
विकल्पों को ऊपर-नीचे रखें और ऐसे क्रम में जो सवाल के लिए मायने रखता हो, जैसे सबसे छोटे से सबसे बड़े तक। हर विकल्प पहले से अपने टार्गेट की ऊँचाई के लिए जगह रखता है, इसलिए ऊपर-नीचे रखे विकल्पों को अलग से गैप नहीं चाहिए।
लेबल छोटे और एक जैसे रूप में रखें, ताकि उनकी तुलना आसान हो।
एक ग्रुप के विकल्पों को एक ही कंटेनर में साथ रखें।

न करें

अकेला एक रेडियो बटन इस्तेमाल न करें। एक हाँ-या-ना वाले चुनाव के लिए चेकबॉक्स या स्विच इस्तेमाल करें।
जिन चुनावों में से कई एक साथ चुने जा सकते हैं, उनके लिए रेडियो बटन इस्तेमाल न करें। चेकबॉक्स इस्तेमाल करें।
विकल्प चयनित होते ही कोई भारी क्रिया शुरू न करें, जैसे पेज से कहीं और नेविगेट करना। ऐरो कुंजियाँ जिस भी विकल्प से गुज़रती हैं उसे चुन लेती हैं, इसलिए कीबोर्ड इस्तेमाल करने वाला व्यक्ति अपने मनचाहे विकल्प तक पहुँचते-पहुँचते उसे ट्रिगर कर देगा।
एक ग्रुप को स्क्रीन के अलग-अलग हिस्सों में न बाँटें।

सुलभता

रोल: radio
लेबलिंग: label is each option's accessible name, visible or not (labelHidden). The group's name (the question the options answer) is the radio group's label. Where options are grouped without a radio group (RAD-25) the product gives it: on the web a container with role radiogroup and aria-labelledby; on the other platforms the group container's label.
न्यूनतम टार्गेट: दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
`Tab / Shift+Tab`	Moves focus into the group (to the selected option, or the first enabled one when none is selected) and out of it.
`Space`	Selects the focused option if it is not selected; nothing while it is read-only.
`Down Arrow / Right Arrow`	Moves to the next enabled option and selects it, wrapping (Left Arrow in right-to-left); an option that is read-only is focused and not selected.
`Up Arrow / Left Arrow`	Moves to the previous enabled option and selects it, wrapping (Right Arrow in right-to-left); an option that is read-only is focused and not selected.
`Enter`	Nothing on the web (it submits the form); selects where the platform activates any focused control with Enter (Android, tvOS).

Scope: this spec covers the option, and what holds among the options of any group however it is formed (RAD-3, RAD-4, RAD-5, RAD-16). The radio group component (`radio-group`) is the group in the usual case: it holds the value, names the set and draws its label, its description and its error. Grouping without it (RAD-25) is for options that one container cannot lay out — one in each row of a table or a list, one on each card — and draws nothing, so it has no tokens.
iOS has no radio role: an option is exposed as a button with the selected trait, and its position ("2 of 3") through its accessibility value.
The ring alone carries the selected condition at 3:1 against the surface (WCAG 1.4.11): the selected ring is sys.color.primary, which the build holds to 4.5:1 on every surface role, and its stroke is 2.5 times the unselected one, so the selection does not rest on color alone (WCAG 1.4.1). The translucent fill is not counted for that, but it is a part of the mark, and WCAG 1.4.11 measures a part against the colors next to it: where the fill meets the ring (fill.inset 0) it is held 3:1 against the ring, and where an inset leaves a gap (a dot) it is held 3:1 against the gap, which shows what the radio stands on. The build holds it as drawn — the fill at comp.radio-button.fill.opacity and the ring, each over the state layer of the state — at rest, hovered, focused and pressed (a disabled option is exempt, as WCAG exempts an inactive control), on every surface role, in every scheme; in the default system the fill is the ring's color at 16 %, 3.17:1 from the ring at the least (the focused error form on surface-container-highest in light). In an error form the ring is sys.color.error, which the build holds to 4.5:1 on every surface role as it holds the primary role, so both error forms keep 3:1 (WCAG 1.4.11) and the selection is still told by the stroke.
A group in error is said by the radio group — its error text and its invalid state (RGP-8) — and shown on every option of it: the ring, and the fill of the selected one, take the error color (RAD-26), as a checkbox's box does (CHK-4). The color is one more sign and never the only one (WCAG 1.4.1): the words and the state carry the error, and the option exposes no invalid state of its own, because the radio role has none. The option has an error condition so that one form marks its checkboxes and its radio buttons by one rule.
Read-only (RAD-28) is said by the group, never by the option: WAI-ARIA has aria-readonly on radiogroup and not on radio. A radio group that is read-only says it (RGP-20); options grouped by name alone are read-only as a set when each is, and the product says it on the container it gives them (on the web, aria-readonly on the element with role radiogroup). HTML's readonly attribute does not apply to a radio button, so the option cancels its activation itself.

इससे जनरेट किया गया: specs/radio-button.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

हर विकल्प रेडियो का रोल, यह कि वह चयनित है या नहीं, अपना अक्षम स्टेट, और ग्रुप के साइज़ के साथ ग्रुप में अपनी जगह (“3 में से 2”) देता है। Apple के प्लैटफ़ॉर्म में रेडियो का रोल नहीं है, इसलिए वहाँ विकल्प selected ट्रेट वाला एक बटन है और उसकी जगह उसकी एक्सेसिबिलिटी वैल्यू है। Flutter के सिमैंटिक्स अभी जगह नहीं बता सकते।
लेबल ही एक्सेसिबल नाम है, चाहे वह दिखाया गया हो या labelHidden से छिपाया गया हो। दिखने वाला टेक्स्ट सहायक तकनीक से छिपा रहता है, इसलिए नाम एक ही बार पढ़ा जाता है।
ग्रुप का एक ही Tab स्टॉप होता है: चयनित विकल्प, या जब कोई चयनित न हो तो पहला सक्षम विकल्प। ऐरो कुंजियाँ अगले या पिछले सक्षम विकल्प पर जाती हैं और उसे चुन लेती हैं, और सिरों पर घूमकर दूसरे सिरे पर पहुँचती हैं; दाएँ से बाएँ वाले लेआउट में Left और Right आपस में बदल जाती हैं।
Space फ़ोकस वाले विकल्प को चुनती है। Enter उसे सिर्फ़ वहाँ चुनती है जहाँ प्लैटफ़ॉर्म फ़ोकस वाले किसी भी कंट्रोल को Enter से सक्रिय करता है (Android, tvOS); वेब पर Enter फ़ॉर्म सबमिट करती है।
readOnly सेट रहने पर, या आसपास के रेडियो ग्रुप के केवल पढ़ने वाला रहने पर, विकल्प फ़ोकस हो सकता है और ऐरो कुंजियाँ अब भी उस तक पहुँचती हैं, पर कुछ भी उसे नहीं चुनता: न दबाना, न Space, न लेबल पर क्लिक, न click(), न उस पर पहुँचने वाली ऐरो कुंजी। इस पर होवर या दबाने की कोई प्रतिक्रिया नहीं दिखती। radio रोल में केवल पढ़ने की कोई अवस्था नहीं है, इसलिए यह बात ग्रुप बताता है।
किसी विकल्प को चुनने से बाक़ी अचयनित हो जाते हैं। बदलाव की सूचना सिर्फ़ वही विकल्प देता है जो चयनित हुआ, और चयनित विकल्प को सक्रिय करने से कुछ नहीं होता।
लेबल पर क्लिक या टैप विकल्प को चुनता है। लेबल हिट एरिया का हिस्सा है, और हिट एरिया न्यूनतम टार्गेट पूरा करता है। हर विकल्प लेआउट में टार्गेट की ऊँचाई के लिए जगह रखता है, इसलिए ऊपर-नीचे रखे विकल्पों के टार्गेट पूरे और अलग-अलग रहते हैं।
चयन सिर्फ़ रिंग से दिखता है: डिफ़ॉल्ट सिस्टम में चयनित रिंग हर सरफ़ेस के मुक़ाबले 3:1 बनाए रखती है, और वह अचयनित रिंग से ढाई गुना मोटी है। पारदर्शी फ़िल इसमें नहीं गिना जाता, पर जिस रिंग से वह मिलता है उससे वह हर अवस्था में, हर सरफ़ेस पर और हर स्कीम में 3:1 अलग रखा जाता है (WCAG 1.4.11), ताकि चुने गए विकल्प का केंद्र भी दिखे।
यह फ़ोकस इंडिकेटर सिर्फ़ कीबोर्ड फ़ोकस के लिए दिखाता है।
जहाँ मोशन कम किया गया है, वहाँ नई अवस्था तुरंत और पूरी दिखती है।
लेबल का न होना डीबग बिल्ड में रिपोर्ट किया जाता है।

प्लैटफ़ॉर्म की ज्ञात कमियाँ:

SwiftUI, Compose, Flutter और React Native अब भी पिछला रेडियो बटन बनाते हैं, बिंदु के साथ और पिछले साइज़ पर, अभी रिंग और फ़िल को एक शेप के रूप में नहीं बनाते, और लेआउट में टार्गेट की ऊँचाई के लिए जगह नहीं रखते, इसलिए बिना गैप के ऊपर-नीचे रखे विकल्प टार्गेट एरिया साझा करते हैं।
readOnly अभी सिर्फ़ वेब पर है: SwiftUI, Compose, Flutter और React Native में यह अभी नहीं है।
m3-like में चयनित बिंदु अपने पूरे साइज़ पर फ़ेड होकर आता है, जबकि Material उसे केंद्र से स्केल करके लाता है (मिमिक्री गैप radio-dot-scale-in)।

आपको क्या करना है

ग्रुप को उस सवाल से नाम दें जिसका वह जवाब देता है। वेब पर विकल्पों को role="radiogroup" और aria-labelledby वाले एलिमेंट में, या <legend> वाले <fieldset> में लपेटें। Flutter में TanreiRadioGroup पर semanticLabel सेट करें; React Native में RadioGroup पर accessibilityLabel सेट करें।
ग्रुप को प्लैटफ़ॉर्म के तरीक़े से बनाएँ, ताकि कुंजियाँ और जगह काम करें: वेब पर एक ही name, Compose में पैरेंट पर Modifier.selectableGroup(), Flutter में TanreiRadioGroup और React Native में RadioGroup।
जहाँ आप विकल्पों को ख़ुद name से समूह बनाते हैं और हर एक को केवल पढ़ने वाला बनाते हैं, वहाँ यह कंटेनर पर बताएँ: role="radiogroup" के साथ aria-readonly="true"। readOnly वाला रेडियो ग्रुप यह आपके लिए करता है।
अगर सवाल ज़रूरी है और उसका जवाब नहीं दिया गया, तो संदेश ग्रुप पर दिखाएँ: त्रुटि वाला रेडियो ग्रुप अपना त्रुटि टेक्स्ट दिखाता है और हर रेडियो बटन को उसके त्रुटि वाले रूप में रखता है। जो विकल्प रेडियो ग्रुप के बिना ग्रुप किए गए हैं, उनमें हर रेडियो बटन पर error सेट करें: रिंग और बिंदु त्रुटि का रंग लेते हैं, जैसे चेकबॉक्स का बॉक्स लेता है। अक्षम विकल्प त्रुटि का रंग नहीं दिखाता।
त्रुटि वाला रेडियो बटन सहायक तकनीक को अमान्य के रूप में नहीं दिया जाता, क्योंकि उसके रोल में ऐसा कोई स्टेट नहीं है। यह बात ग्रुप कहता है: रेडियो ग्रुप अमान्य होता है और उसका त्रुटि टेक्स्ट उसका विवरण होता है। जहाँ आप विकल्पों को ख़ुद ग्रुप करते हैं, वहाँ त्रुटि उनके बग़ल में शब्दों में कहें।
अगर आप अपनी लेयर में रिंग और फ़िल की स्टाइल बदलते हैं, तो रिंग को इतना मज़बूत रखें कि वह अकेले चयन दिखा सके। बिल्ड इसकी जाँच नहीं करता।
React Native में, जब प्रॉडक्ट अंग्रेज़ी में न हो, तो RadioGroup को positionText दें। डिफ़ॉल्ट रूप से जगह “2 of 3” के रूप में पढ़कर सुनाई जाती है।

GitHub पर सोर्स कोड और इश्यू