Free
Pro

Tri-State Checkbox

A free checkbox that cycles unchecked → checked → indeterminate on each click. The form value is true, false, or 'indeterminate'.

For parent-driven “select all” mixed state, keep using <base-checkbox [indeterminate]> instead.

freenew

Basic usage

Click the control to cycle states. Bind with [(ngModel)] or formControlName.

State: false (unchecked)

HTML


TypeScript

Colors

Same color tokens as base-checkbox: primary, success, danger, warning, accent.

HTML

Initial indeterminate

Seed the control with 'indeterminate' when needed.

State: "indeterminate"

TypeScript

Disabled

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add tri-state-checkbox

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add tri-state-checkbox
// Paths are relative to aliases.components (default: src/app/components)
import { TriStateCheckboxComponent } from './tri-state-checkbox/tri-state-checkbox.component';

@Component({
  selector: 'app-your-component',
  imports: [
    TriStateCheckboxComponent
  ],
  template: `...`
})
export class YourComponent {}

API for tri-state-checkbox — generated from JSDoc in the library source.

API reference for tri-state-checkbox
APIMemberTypeDefaultDescription
base-tri-state-checkboxclassstring''Extra host classes merged via `cn()`.
base-tri-state-checkboxcolorCheckboxColor'primary'Semantic visual color.
base-tri-state-checkboxdisabledbooleanfalseWhether the control is disabled (consumer-facing input).
base-tri-state-checkboxstateTriCheckboxStatefalseCurrent tri-state value. Prefer `[(ngModel)]` / `formControlName` in forms. Also supports two-way binding via `[(state)]`.
base-tri-state-checkboxariaLabelstring | undefinedundefinedOptional accessible name for the native input when there is no visible label text.