Checkbox

Checkboxes are used for independent boolean choices and multi-select patterns across Aggarly Platform. They are token-driven, theme-safe, RTL-safe, and designed for long work sessions with consistent focus-visible affordances. This implementation uses a premium, centered mark (mask-based) to keep visual weight aligned.

Glass UI is optional and should be used selectively on premium surfaces. Premium is the default Aggarly Platform checkbox style.

Default Checkbox (Premium Solid)

Premium is the default. Use labels for clarity and descriptions for enterprise-grade configuration surfaces.

Enable notifications

Share progress with workspace membersWorkspace members can view a read-only summary in the portal.

Lock editingRequires supervisor role.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="stack-sm">
      <Checkbox label="Enable notifications" defaultChecked />

      <Checkbox
        label="Share progress with workspace members"
        description="Workspace members can view a read-only summary in the portal."
      />

      <Checkbox
        label="Lock editing"
        description="Requires supervisor role."
        disabled
      />
    </div>
  );
}

Tones (Solid)

Tones provide semantic meaning and consistent visual language across the platform.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="checks-grid">
      <Checkbox tone="primary" label="Primary" defaultChecked />
      <Checkbox tone="secondary" label="Secondary" defaultChecked />
      <Checkbox tone="success" label="Success" defaultChecked />
      <Checkbox tone="warning" label="Warning" defaultChecked />
      <Checkbox tone="danger" label="Danger" defaultChecked />
      <Checkbox tone="neutral" label="Neutral" defaultChecked />
    </div>
  );
}

Outlined Checkboxes (Different Colors)

Outlined variant keeps the control lighter while still providing strong tone signaling.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="checks-grid">
      <Checkbox variant="outline" tone="primary" label="Primary" defaultChecked />
      <Checkbox variant="outline" tone="secondary" label="Secondary" defaultChecked />
      <Checkbox variant="outline" tone="success" label="Success" defaultChecked />
      <Checkbox variant="outline" tone="warning" label="Warning" defaultChecked />
      <Checkbox variant="outline" tone="danger" label="Danger" defaultChecked />
      <Checkbox variant="outline" tone="neutral" label="Neutral" defaultChecked />
    </div>
  );
}

Indeterminate

Use indeterminate state for partial selections (e.g., “Select all” when some items are selected).

Select all students

Student A

Student B

Student C

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="stack-sm">
      <Checkbox label="Select all students" indeterminate />

      <div className="checks-grid">
        <Checkbox label="Student A" defaultChecked />
        <Checkbox label="Student B" defaultChecked={false} />
        <Checkbox label="Student C" defaultChecked />
      </div>
    </div>
  );
}

Sizes

Use sm for dense toolbars/tables, md for forms, and lg for primary settings surfaces.

Small

Default

Large

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="stack-sm">
      <Checkbox size="sm" label="Small" defaultChecked />
      <Checkbox size="md" label="Default" defaultChecked />
      <Checkbox size="lg" label="Large" defaultChecked />
    </div>
  );
}

Without Labels

Label-less checkboxes are allowed for dense table row selection, but must include aria-label for accessibility.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="checks-toolbar" aria-label="Row selection">
      <Checkbox aria-label="Select row 1" />
      <Checkbox aria-label="Select row 2" defaultChecked />
      <Checkbox aria-label="Select row 3" />
      <Checkbox aria-label="Select row 4" disabled />
    </div>
  );
}

Card Checkboxes (Solid)

Premium multi-select pattern for settings, plans, roles, and access control.

Workspace admin portal accessEnable access to dashboards, sessions, and student plans.

Supervisor reviewRequire supervisor approval for plan changes.

Sensitive data visibilityLimit visibility to authorized roles only.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="checks-cards">
      <Checkbox
        mode="card"
        tone="primary"
        label="Workspace admin portal access"
        description="Enable access to dashboards, sessions, and student plans."
        defaultChecked
      />

      <Checkbox
        mode="card"
        tone="secondary"
        label="Supervisor review"
        description="Require supervisor approval for plan changes."
      />

      <Checkbox
        mode="card"
        tone="warning"
        label="Sensitive data visibility"
        description="Limit visibility to authorized roles only."
        indeterminate
      />
    </div>
  );
}

Card Checkboxes (Outline)

Outline card variant keeps the card lighter while still signaling selection via border + indicator tone.

Workspace admin portal accessEnable access to dashboards, sessions, and student plans.

PII export permissionAllow exporting sensitive student data.

Requires reviewPartial selection / mixed state example.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="checks-cards">
      <Checkbox
        mode="card"
        variant="outline"
        tone="primary"
        label="Workspace admin portal access"
        description="Enable access to dashboards, sessions, and student plans."
        defaultChecked
      />

      <Checkbox
        mode="card"
        variant="outline"
        tone="danger"
        label="PII export permission"
        description="Allow exporting sensitive student data."
      />

      <Checkbox
        mode="card"
        variant="outline"
        tone="warning"
        label="Requires review"
        description="Partial selection / mixed state example."
        indeterminate
      />
    </div>
  );
}

Glass / Neuomorphic

Optional glass UI for premium surfaces. Uses token-driven translucent backgrounds and blur (where supported).

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="stack-md">
      <div className="text-sm text-muted">Glass (solid)</div>
      <div className="checks-grid">
        <Checkbox ui="glass" tone="primary" label="Primary" defaultChecked />
        <Checkbox ui="glass" tone="secondary" label="Secondary" defaultChecked />
        <Checkbox ui="glass" tone="success" label="Success" defaultChecked />
        <Checkbox ui="glass" tone="warning" label="Warning" defaultChecked />
        <Checkbox ui="glass" tone="danger" label="Danger" defaultChecked />
        <Checkbox ui="glass" tone="neutral" label="Neutral" defaultChecked />
      </div>

      <div className="text-sm text-muted">Glass (outline)</div>
      <div className="checks-grid">
        <Checkbox ui="glass" variant="outline" tone="primary" label="Primary" defaultChecked />
        <Checkbox ui="glass" variant="outline" tone="secondary" label="Secondary" defaultChecked />
        <Checkbox ui="glass" variant="outline" tone="success" label="Success" defaultChecked />
        <Checkbox ui="glass" variant="outline" tone="warning" label="Warning" defaultChecked />
        <Checkbox ui="glass" variant="outline" tone="danger" label="Danger" defaultChecked />
        <Checkbox ui="glass" variant="outline" tone="neutral" label="Neutral" defaultChecked />
      </div>
    </div>
  );
}

Glass Cards

Glass UI also supports card mode for multi-select patterns. Use selectively for premium configuration panels.

Workspace admin portal accessEnable access to dashboards, sessions, and student plans.

Supervisor reviewRequire supervisor approval for plan changes.

Requires reviewPartial selection / mixed state example.

Show code

import { Checkbox } from "@/design-system/components/Checkbox";

export function Example() {
  return (
    <div className="checks-cards">
      <Checkbox
        mode="card"
        ui="glass"
        tone="primary"
        label="Workspace admin portal access"
        description="Enable access to dashboards, sessions, and student plans."
        defaultChecked
      />

      <Checkbox
        mode="card"
        ui="glass"
        variant="outline"
        tone="secondary"
        label="Supervisor review"
        description="Require supervisor approval for plan changes."
      />

      <Checkbox
        mode="card"
        ui="glass"
        variant="outline"
        tone="warning"
        label="Requires review"
        description="Partial selection / mixed state example."
        indeterminate
      />
    </div>
  );
}