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

checkbox-group

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

CheckboxGroup component structure

CheckboxGroup is based on the div element and consists of CheckboxGroup.Root that contains all parts, and CheckboxGroup.Item for individual selectable items in the group. It supports common margin props.

CheckboxGroup defaultValue prop

The CheckboxGroup.Root accepts a defaultValue prop that takes an array of strings representing the values of items that should be initially checked.

CheckboxGroup name prop

The CheckboxGroup.Root accepts a name prop that identifies the checkbox group in form submissions.

CheckboxGroup size prop values

The CheckboxGroup.Root accepts a size prop with values 1, 2, or 3 to control the checkbox size.

CheckboxGroup variant prop values

The CheckboxGroup.Root accepts a variant prop with values 'surface', 'classic', or 'soft' to control the visual style of the checkboxes.

CheckboxGroup color prop

The CheckboxGroup.Root accepts a color prop to assign a specific color. Supported colors include indigo, cyan, orange, crimson, and gray.

CheckboxGroup highContrast prop

The CheckboxGroup.Root accepts a highContrast boolean prop that increases color contrast with the background.

CheckboxGroup.Item value prop

CheckboxGroup.Item requires a value prop that is a string identifying the item's value in the group.

CheckboxGroup.Item disabled attribute

CheckboxGroup.Item accepts the native disabled attribute to create a disabled checkbox that cannot be selected.

CheckboxGroup alignment with Text

Composing CheckboxGroup.Item within Text automatically centers it with the first line of text, and is also well-aligned with multi-line text.

CheckboxGroup basic example

Example showing a basic checkbox group with three items: <CheckboxGroup.Root defaultValue={["1"]} name="example"> <CheckboxGroup.Item value="1">Fun</CheckboxGroup.Item> <CheckboxGroup.Item value="2">Serious</CheckboxGroup.Item> <CheckboxGroup.Item value="3">Smart</CheckboxGroup.Item> </CheckboxGroup.Root>

Radix Themes 3.0.0 new components: CheckboxGroup

Radix Themes 3.0.0 added a new CheckboxGroup component: a group of checkboxes with an optional text label and roving focus. Parts: Root, Item.

Give your agent this brain