Checkbox

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

Preview

Enable release notifications Include beta features Require approval before merge

Usage

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

HTML

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

Examples

Basic

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

Accept terms and conditions

Checked and unchecked

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

Email updates SMS alerts

Indeterminate

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

Select project permissions

Disabled

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

Locked until verification is complete Previously selected option

Invalid

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

Accept security policy before continuing

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.

Use compact approval flow Send rollout summary to Slack

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.

Allow workspace members to publish changes Inherited from organization policy

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);