checkbox

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.

Checkbox color tokens for default states

Group label text uses $text-secondary. Checkbox label text uses $text-primary. Unchecked checkbox has $icon-primary border and transparent background. Checked checkbox has $icon-primary background with $icon-inverse checkmark.

Checkbox helper and error text colors

Helper text uses $text-secondary color token. Error message text uses $text-error color token.

Checkbox focus state styling

In focus state, the checkbox border color is $focus.

Checkbox disabled state styling

In disabled state, label text uses $text-disabled color. Checkbox border and background both use $icon-disabled color token.

Checkbox read-only state styling

In read-only state, label text uses $text-primary. Checkbox border uses $icon-disabled color. Inner fill uses $icon-primary color.

Checkbox error state styling

In error state, label text uses $text-primary. Checkbox border uses $support-error color. Error message text uses $text-error color token. Error icon SVG uses $support-error color.

Checkbox warning state styling

In warning state, label text uses $text-primary. Checkbox border uses $icon-primary color. Warning message text uses $text-primary. Warning icon SVG uses $support-warning color with $black inner fill.

Checkbox typography specifications

Group label: 12px/0.75rem, Regular/400 weight, uses $label-01 token. Checkbox label: 14px/0.875rem, Regular/400 weight, uses $body-compact-01 token. Helper text: 12px/0.75rem, Regular/400 weight, uses $helper-text-01 token. Error message: 12px/0.75rem, Regular/400 weight, uses $label-01 token. Warning message: 12px/0.75rem, Regular/400 weight, uses $label-01 token.

Checkbox label capitalization and word limit

Checkbox labels and group labels should use sentence case, with only the first word in a phrase and any proper nouns capitalized. Labels should not exceed three words.

Checkbox dimensions and border width

Checkbox has 16px height and width. Default border is 1px. Focus state border is 2px with 1px inset.

Checkbox spacing structure

Group label margin-bottom: 8px/0.5rem using $spacing-03 token. Checkbox label padding-left: 8px/0.5rem using $spacing-03 token. Checkbox item margin-bottom: 4px/0.25rem using $spacing-02 token.

Checkbox AI variant styling

The only style modification for an AI variant of the checkbox is the addition of an AI label with mini size. All other color and structure tokens remain the same as non-AI variants.

Give your agent this brain