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

toggle-group

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

Toggle Group Root orientation prop

The Root orientation prop (type: 'horizontal' | 'vertical' | undefined, default: undefined, required: false) determines how focus moves: horizontal for left/right arrows and vertical for up/down arrows.

Toggle Group structure and parts

Toggle Group has two parts: Root (contains all parts of a toggle group) and Item (an item in the group).

Toggle Group highlights

Toggle Group provides full keyboard navigation, supports horizontal and vertical orientation, supports single and multiple pressed buttons, and can be controlled or uncontrolled.

Toggle Group Root type prop

The Root type prop is required and accepts either 'single' or 'multiple', determining whether a single or multiple items can be pressed at a time.

Toggle Group controlled multiple value API

For type='multiple': value prop (type: string[], required: false, default: []) is the controlled value of the pressed items; defaultValue prop (type: string[], required: false, default: []) are the values to show as pressed when initially rendered; onValueChange prop (type: (value: string[]) => void, required: false) is the event handler called when pressed state changes.

Toggle Group Root disabled prop

The Root disabled prop (type: boolean, default: false, required: false) prevents the user from interacting with the toggle group and all its items when true.

Toggle Group Root rovingFocus prop

The Root rovingFocus prop (type: boolean, default: true, required: false) disables navigation through items using arrow keys when set to false.

Toggle Group Root dir prop

The Root dir prop (type: 'ltr' | 'rtl', required: false) sets the reading direction of the toggle group. If omitted, it inherits globally from DirectionProvider or assumes LTR (left-to-right) reading mode.

Toggle Group Root loop prop

The Root loop prop (type: boolean, default: true, required: false) enables keyboard navigation looping from last item to first and vice versa when true and rovingFocus is true.

Toggle Group Root asChild prop

The Root asChild prop (type: boolean, default: false, required: false) changes the default rendered element for the one passed as a child, merging their props and behavior.

Toggle Group Item value prop

The Item value prop (type: string, required: true) is a unique value for the item.

Toggle Group Item disabled prop

The Item disabled prop (type: boolean) prevents the user from interacting with the item when true.

Toggle Group Item asChild prop

The Item asChild prop (type: boolean, default: false, required: false) changes the default rendered element for the one passed as a child, merging their props and behavior.

Toggle Group Root data-orientation attribute

The Root element has a data-orientation attribute with values 'vertical' or 'horizontal'.

Toggle Group Item data-state attribute

The Item element has a data-state attribute with values 'on' or 'off'.

Toggle Group Item data-disabled attribute

The Item element has a data-disabled attribute present when disabled.

Toggle Group Item data-orientation attribute

The Item element has a data-orientation attribute with values 'vertical' or 'horizontal'.

Toggle Group accessibility uses roving tabindex

Toggle Group uses roving tabindex to manage focus movement among items.

Toggle Group example: ensuring a value is always selected

Example showing controlled single-type Toggle Group that prevents deselection by checking if value is truthy before updating state: ```jsx import * as React from "react"; import { ToggleGroup } from "radix-ui"; export default () => { const [value, setValue] = React.useState("left"); return ( <ToggleGroup.Root type="single" value={value} onValueChange={(value) => { if (value) setValue(value); }} > <ToggleGroup.Item value="left"> <TextAlignLeftIcon /> </ToggleGroup.Item> <ToggleGroup.Item value="center"> <TextAlignCenterIcon /> </ToggleGroup.Item> <ToggleGroup.Item value="right"> <TextAlignRightIcon /> </ToggleGroup.Item> </ToggleGroup.Root> ); }; ```

Give your agent this brain