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

shadcn/ui · Components · all subjects

checkbox/usage

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

Checkbox basic usage

The most basic checkbox implementation is: <Checkbox />

Checkbox with label and description

Pair the checkbox with Field, FieldLabel, FieldContent, and FieldDescription components for proper layout, labeling, and helper text.

Checkbox controlled state

To control checkbox state, use the checked prop and onCheckedChange callback. Example: <Checkbox checked={checked} onCheckedChange={setChecked} /> where checked is a boolean state and onCheckedChange is a state setter function.

Checkbox uncontrolled state

Use the defaultChecked prop for uncontrolled checkboxes that manage their own state.

Basic checkbox usage

The basic checkbox can be rendered with just <Checkbox />

Checkbox group for multiple selections

Create a checkbox list or group by using multiple Field components, each containing a Checkbox component for creating multiple selectable options.

Checkbox import path

Import the Checkbox component using: import { Checkbox } from "@/components/ui/checkbox"

Basic checkbox rendering

A basic checkbox is rendered with the simple self-closing tag: <Checkbox />

Checkbox invalid state styling

To show invalid styles on a checkbox, set the `aria-invalid` attribute on the checkbox element and the `data-invalid` attribute on the field wrapper component.

Checkbox disabled state

Use the `disabled` prop on the Checkbox component to prevent interaction. Add the `data-disabled` attribute to the `<Field>` component wrapper to apply disabled styles.

Give your agent this brain