new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Radix Primitives · all subjects

radio-group

32 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

RadioGroup accessibility pattern

RadioGroup adheres to the Radio Group WAI-ARIA design pattern from https://www.w3.org/WAI/ARIA/apg/patterns/radio and uses roving tabindex to manage focus movement among radio items.

RadioGroup example decoupling hidden input

Example showing how to decouple the hidden input using unstable parts: import { RadioGroup } from "radix-ui"; export default () => ( <RadioGroup.Root> {["one", "two", "three"].map((value) => ( <RadioGroup.unstable_ItemProvider key={value} value={value}> <RadioGroup.unstable_ItemTrigger> <RadioGroup.Indicator /> </RadioGroup.unstable_ItemTrigger> <RadioGroup.unstable_ItemBubbleInput /> </RadioGroup.unstable_ItemProvider> ))} </RadioGroup.Root> ); This example demonstrates building a RadioGroup by mapping over values, using unstable_ItemProvider to wrap each item's state, unstable_ItemTrigger as the interactive element, Indicator for the checked state, and unstable_ItemBubbleInput for the form input.

RadioGroup anatomy and parts

RadioGroup consists of three main parts: RadioGroup.Root (contains all parts), RadioGroup.Item (checkable button in the group), and RadioGroup.Indicator (renders when item is checked).

RadioGroup Root props API

RadioGroup.Root props: asChild (boolean, default false), defaultValue (string), value (string), onValueChange (function), disabled (boolean), name (string), required (boolean), orientation (horizontal | vertical | undefined, default undefined), dir (ltr | rtl), loop (boolean, default true). The orientation prop sets horizontal or vertical layout. The dir prop sets reading direction, inheriting from DirectionProvider or defaulting to LTR. The loop prop enables keyboard navigation to wrap from last item to first and vice versa.

RadioGroup Root data attributes

RadioGroup.Root renders [data-disabled] attribute when disabled.

RadioGroup Item props API

RadioGroup.Item props: asChild (boolean, default false), value (string, required), disabled (boolean), required (boolean). When used within a form, Item automatically renders a visually hidden input element for form submission to ensure events propagate correctly.

RadioGroup Item data attributes

RadioGroup.Item renders [data-state] attribute with values 'checked' or 'unchecked', and [data-disabled] attribute when disabled.

RadioGroup Indicator props API

RadioGroup.Indicator props: asChild (boolean, default false), forceMount (boolean). The Indicator renders only when the radio item is checked, but forceMount forces mounting for control of animations with React animation libraries.

RadioGroup Indicator data attributes

RadioGroup.Indicator renders [data-state] attribute with values 'checked' or 'unchecked', and [data-disabled] attribute when disabled.

RadioGroup controlled and uncontrolled

RadioGroup supports both controlled and uncontrolled modes. Use defaultValue for uncontrolled mode to set the initial checked item. Use value with onValueChange for controlled mode.

RadioGroup unstable composition parts

RadioGroup provides unstable lower-level parts for advanced composition: RadioGroup.unstable_ItemProvider (provides item state, accepts value and disabled props), RadioGroup.unstable_ItemTrigger (interactive element wrapping Indicator), RadioGroup.unstable_ItemBubbleInput (visually hidden input for form submission). These parts are prefixed with unstable_ and their API may change in future releases. Use these to decouple, move, or exclude the hidden input.

RadioGroup keyboard navigation

RadioGroup uses roving tabindex to manage focus. Tab moves focus to the checked radio item or first item in the group. Space checks an unchecked focused item. ArrowDown and ArrowRight move focus and check the next item. ArrowUp and ArrowLeft move focus to the previous item. When loop is true (default), navigation wraps from last to first and vice versa.

RadioGroup.Root disabled prop

RadioGroup.Root has a disabled prop that disables all radio items in the group.

RadioGroup.Root no longer focusable when all items disabled

RadioGroup.Root is no longer focusable when all radio items are disabled.

Radio Group unstable composition parts

Radio Group now exposes unstable composition parts: unstable_ItemProvider, unstable_ItemTrigger, and unstable_ItemBubbleInput. These allow direct access and recomposition of the visually hidden inputs rendered for form submission.

Radio Group form prop forwarding to bubble input

Forward the form prop to the bubble input element to fix non-parent form submissions in Radio Group.

RadioGroup.Root aria-required attribute

RadioGroup.Root has an aria-required attribute.

RadioGroup prevents activation via enter key

RadioGroup items no longer activate when the enter key is pressed.

RadioGroup onValueChange signature changed

RadioGroup's onValueChange callback changed from onValueChange(event) to onValueChange(value: string).

Radio Group version 0.0.15 breaking change: readOnly prop removed

In Radio Group version 0.0.15, the readOnly prop was removed.

Radio Group version 0.0.15 adds optional orientation, dir, and loop props

Radio Group version 0.0.15 added optional orientation, dir, and loop props.

Radio Group version 0.0.5 breaking change: name prop moved from Item to Root

In Radio Group version 0.0.5, the name prop was moved from the Item component to the Root component.

RadioGroup.Root basic usage

RadioGroup.Root is the container that holds all parts of a radio group. It accepts props including defaultValue (initial selected value), name (form name), size, variant, color, and highContrast. Example: <RadioGroup.Root defaultValue="1" name="example"><RadioGroup.Item value="1">Default</RadioGroup.Item></RadioGroup.Root>

RadioGroup.Item basic usage

RadioGroup.Item represents a single radio button option within a RadioGroup.Root. It requires a value prop and can contain text content. Example: <RadioGroup.Item value="1">Default</RadioGroup.Item>

RadioGroup size prop values

The size prop on RadioGroup.Root controls the radio button size. Supported values are: 1, 2, and 3, with 1 being the smallest.

RadioGroup variant prop values

The variant prop on RadioGroup.Root controls the visual style of radio buttons. Supported values are: surface, classic, and soft.

RadioGroup color prop values

The color prop on RadioGroup.Root assigns a specific color to radio buttons. Supported color values include: indigo, cyan, orange, crimson, and gray.

RadioGroup highContrast prop

The highContrast prop on RadioGroup.Root is a boolean that increases color contrast between the radio button and the background when set to true.

RadioGroup.Item disabled attribute

RadioGroup.Item supports the native disabled attribute to create a disabled radio button. Example: <RadioGroup.Item value="1" disabled>Off</RadioGroup.Item>

RadioGroup alignment with text

When RadioGroup.Item is composed within a Text component, it automatically centers vertically with the first line of text. This alignment works correctly with both single-line and multi-line text.

RadioGroup inheritance from primitive

RadioGroup.Root inherits props from the Radio Group primitive and supports common margin props for layout control.

RadioGroup only one selection

Radio Group is a set of interactive radio buttons where only one can be selected at a time.

Give your agent this brain