Checkbox | Flint Design System by Inner Spark Media

CSS

For Astro, EJS and plain HTML. These rules read only component tokens.

HTML

<fieldset>
  <legend>Packing list</legend>
  <label><input type="checkbox" class="flint-check" checked /> Bring the awning lights</label>
  <label><input type="checkbox" class="flint-check" /> Pack the Starlink</label>
</fieldset>

CSS

.flint-check {
  appearance: none; display: inline-grid; place-content: center; margin: 0; cursor: pointer;
  width: var(--checkbox-size); height: var(--checkbox-size);
  border: 2px solid var(--checkbox-border); border-radius: var(--checkbox-radius); background: var(--input-bg);
}
.flint-check::after { content: ""; width: 12px; height: 6px; border: solid transparent; border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }
.flint-check:hover { border-color: var(--input-border-hover); }
.flint-check:checked { background: var(--checkbox-checked-bg); border-color: var(--checkbox-checked-bg); }
.flint-check:checked::after { border-color: var(--checkbox-checked-fg); }
.flint-check:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.flint-check:disabled { border-color: var(--color-border-disabled); background: var(--color-action-disabled-bg); cursor: not-allowed; }
.flint-check:disabled:checked::after { border-color: var(--color-action-disabled); }

MUI

React (MUI)

import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';

<FormControlLabel control={<Checkbox defaultChecked />} label="Bring the awning lights" />

Known gap

The MUI checkbox shows no focus ring on keyboard focus and draws an 18px box instead of 24px (ASDS-44).

shadcn/ui

The Flint version of the shadcn component. Same API as upstream; every value reads a Flint token.

components/ui/checkbox.jsx

// shadcn/ui Checkbox (Radix), restyled to Flint. Changed from upstream: 24px box (Flint's
// targetMin, upstream is 16px), 2px control-colored edge, Flint focus ring.
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import { cn } from '../cn';

export function Checkbox({ className, ...props }) {
  return (
    <CheckboxPrimitive.Root
      data-slot="checkbox"
      className={cn(
        'peer inline-grid place-content-center size-[var(--checkbox-size)] shrink-0 cursor-pointer rounded-[var(--checkbox-radius)] border-2 border-[var(--checkbox-border)] bg-[var(--input-bg)] text-[var(--checkbox-checked-fg)] hover:border-[var(--input-border-hover)] outline-none focus-visible:[outline:var(--focus-ring-width)_solid_var(--focus-ring-color)] focus-visible:[outline-offset:var(--focus-ring-offset)] data-[state=checked]:border-[var(--checkbox-checked-bg)] data-[state=checked]:bg-[var(--checkbox-checked-bg)] disabled:cursor-not-allowed disabled:border-[var(--color-border-disabled)] disabled:bg-[var(--color-action-disabled-bg)] disabled:text-[var(--color-action-disabled)] disabled:data-[state=checked]:border-[var(--color-border-disabled)] disabled:data-[state=checked]:bg-[var(--color-action-disabled-bg)]',
        className,
      )}
      {...props}
    >
      <CheckboxPrimitive.Indicator data-slot="checkbox-indicator" className="grid place-content-center">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M3 8.5l3.2 3L13 4.5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </CheckboxPrimitive.Indicator>
    </CheckboxPrimitive.Root>
  );
}

SwiftUI

Toggle("Bring the awning lights", isOn: $bringLights)
  .toggleStyle(.checkbox) // macOS. On iOS, use a list row with a checkmark.

A ready-made SwiftUI checkbox is moving into the Flint package (ASDS-38). Until then, build it from the component tokens as above.