Logo

Component Blueprint

X: 1280 · Y: 720 · Grid: 8px

Checkbox

Native form-compatible boolean input with token-based styling.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

TS 

import { FrCheckboxModule } from '@frame-ui-ng/components/checkbox';

HTML 

<label frCheckboxField>
  <input frCheckbox type="checkbox" />
  <span frCheckboxLabel>Accept terms and conditions</span>
</label>

03 Examples

Basic

Use a checkbox for independent yes/no choices that can be toggled without affecting sibling options.

Component Sheet

Grid: 8px · Scale: 1:1

Checked and unchecked

Use checked state to reflect persisted preferences or current selections directly from your native form model.

Component Sheet

Grid: 8px · Scale: 1:1

Indeterminate

Use the indeterminate state for partial selection, inherited settings, or parent rows in hierarchical checklists.

Component Sheet

Grid: 8px · Scale: 1:1

Disabled

Disable a checkbox when a policy or upstream dependency temporarily prevents changes while still showing the current state.

Component Sheet

Grid: 8px · Scale: 1:1

Invalid

Use the native invalid hook when a required checkbox needs attention before form submission can continue.

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

Customize the checkbox by scoping token overrides to a wrapper or form section. This keeps the checkbox semantics intact while letting you adjust size, spacing, and checked treatment locally.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

Hover the field wrapper, checkbox box, or label to inspect the tokens that control sizing, checked states, label spacing, and invalid treatment. Click a region to pin the inspector while you review the current values.

06 Design Tokens

Use these CSS custom properties to tune checkbox size, checked-state surfaces, focus treatment, field spacing, and label colors without changing the native input structure.

SCSS 


  --frame-checkbox-root-size: 1rem;
  --frame-checkbox-root-bg: var(--frame-surface);
  --frame-checkbox-root-border: var(--frame-border);
  --frame-checkbox-root-color: var(--frame-primary-foreground);
  --frame-checkbox-root-radius: var(--frame-radius-sm);
  --frame-checkbox-root-hover-bg: var(--frame-checkbox-root-bg);
  --frame-checkbox-root-hover-border: color-mix(in srgb, var(--frame-border) 80%, var(--frame-foreground));
  --frame-checkbox-root-checked-bg: var(--frame-primary);
  --frame-checkbox-root-checked-border: var(--frame-primary);
  --frame-checkbox-root-checked-color: var(--frame-primary-foreground);
  --frame-checkbox-root-ring-color: var(--frame-ring);
  --frame-checkbox-root-focus-shadow: 0 0 0 3px color-mix(in srgb, var(--frame-checkbox-root-ring-color) 35%, transparent);
  --frame-checkbox-root-disabled-opacity: 0.55;
  --frame-checkbox-root-invalid-border: color-mix(in srgb, var(--frame-primary) 45%, var(--frame-border));
  --frame-checkbox-indicator-size: 0.5rem;
  --frame-checkbox-indeterminate-width: 0.5rem;
  --frame-checkbox-indeterminate-height: 0.125rem;
  --frame-checkbox-field-gap: 0.75rem;
  --frame-checkbox-label-color: var(--frame-foreground);
  --frame-checkbox-label-disabled-color: var(--frame-muted-foreground);