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 <ply-checkbox [indeterminate]> instead.

freenew

Playground

color

disabled

state

HTML

<ply-tri-state-checkbox color="primary" state="indeterminate">Tri State Checkbox</ply-tri-state-checkbox>

Basic usage

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

Include archived items

State: false (unchecked)

HTML

<ply-tri-state-checkbox [(ngModel)]="basic">
  Include archived items
</ply-tri-state-checkbox>

TypeScript

basic: TriCheckboxState = false;
// TriCheckboxState = boolean | 'indeterminate'

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-tri-state-checkbox-example',
  imports: [
    TriStateCheckboxComponent
  ],
  template: `...`
})
export class TriStateCheckboxExampleComponent {}

Install

bash

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

Colors

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

HTML

<ply-tri-state-checkbox color="success" [(ngModel)]="value">Success</ply-tri-state-checkbox>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-tri-state-checkbox-example',
  imports: [
    TriStateCheckboxComponent
  ],
  template: `...`
})
export class TriStateCheckboxExampleComponent {}

Install

bash

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

Initial indeterminate

Seed the control with 'indeterminate' when needed.

Partially applied filter

State: "indeterminate"

TypeScript

mixed: TriCheckboxState = 'indeterminate';

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-tri-state-checkbox-example',
  imports: [
    TriStateCheckboxComponent
  ],
  template: `...`
})
export class TriStateCheckboxExampleComponent {}

Install

bash

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

Disabled

Disabled unchecked

Disabled checked

Disabled indeterminate

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-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-tri-state-checkbox-example',
  imports: [
    TriStateCheckboxComponent
  ],
  template: `...`
})
export class TriStateCheckboxExampleComponent {}

Install

bash

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

Installation

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

bash

npx ply-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 Ply MCP server.

bash

npx -y ply-ui-mcp

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

typescript (Example)

// Install: npx ply-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
API	Member	Type	Default	Description
`ply-tri-state-checkbox`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-tri-state-checkbox`	`color`	`CheckboxColor`	`'primary'`	Semantic visual color.
`ply-tri-state-checkbox`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).
`ply-tri-state-checkbox`	`state`	`TriCheckboxState`	`false`	Current tri-state value. Prefer `[(ngModel)]` / `formControlName` in forms. Also supports two-way binding via `[(state)]`.
`ply-tri-state-checkbox`	`ariaLabel`	`string \| undefined`	`undefined`	Optional accessible name for the native input when there is no visible label text.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).