Checkbox

Ply checkbox is a labeled boolean control for forms. Install checkbox, bind ngModel, and use helper text or disabled like the other fields. For mixed parent/child trees use tri-state-checkbox; for an immediate on/off without a form label row, consider toggle.

When to use

Multi-select options and “agree to terms” on a form.
When the value is a boolean (or an array of checked values you own).

When not to use

A single on/off setting with no adjacent options — toggle reads better.
Three states (some children checked) — use tri-state-checkbox.

Install with npx ply-ui-cli add checkbox.

free

Playground

color

disabled

checked

indeterminate

HTML

<ply-checkbox color="primary" [checked]="true">Checkbox</ply-checkbox>

Default Checkbox

Default Checkbox example below.

Default checkbox

Checkbox checked

HTML

<ply-checkbox color="primary" class="block mb-4">
  Default checkbox
</ply-checkbox>
<ply-checkbox color="primary" class="block" checked="true">
  Checkbox checked
</ply-checkbox>

TypeScript

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

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

@Component({
  selector: 'app-checkbox-example',
  imports: [
    CheckboxComponent
  ],
  template: `...`
})
export class CheckboxExampleComponent {}

Install

bash

npx ply-ui-cli add checkbox

Default Checkbox disabled

Add [disabled]="true" to the <ply-checkbox> if need to disable the checkbox

Disabled checkbox

Checkbox checked disabled

HTML

<ply-checkbox color="primary" class="block mb-4" disabled="true">
  Default checkbox
</ply-checkbox>
<ply-checkbox color="primary" class="block" checked="true" disabled="true">
  Checkbox checked
</ply-checkbox>

TypeScript

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

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

@Component({
  selector: 'app-checkbox-example',
  imports: [
    CheckboxComponent
  ],
  template: `...`
})
export class CheckboxExampleComponent {}

Install

bash

npx ply-ui-cli add checkbox

Checkbox with helper text

Checkbox with helper text example below.

Default Checkbox

Some helper text here for example

Disabled Checkbox checked

Some helper text here for example

HTML

<ply-checkbox color="primary" class="block mb-4">
  Default Checkbox
  <p class="text-sm text-slate-600 font-light">
    Some helper text here for example
  </p>
</ply-checkbox>

TypeScript

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

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

@Component({
  selector: 'app-checkbox-example',
  imports: [
    CheckboxComponent
  ],
  template: `...`
})
export class CheckboxExampleComponent {}

Install

bash

npx ply-ui-cli add checkbox

Checkbox colors

Use color="" attribute to define checkbox color. Supported colors are "primary", "success", "danger", "warning" and "accent"

HTML

<ply-checkbox color="primary">
  Checkbox Primary
</ply-checkbox>
<ply-checkbox color="success">
  Checkbox Success
</ply-checkbox>
<ply-checkbox color="accent">
  Checkbox Accent
</ply-checkbox>
<ply-checkbox color="warning">
  Checkbox Warning
</ply-checkbox>
<ply-checkbox color="danger">
  Checkbox Danger
</ply-checkbox>

TypeScript

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

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

@Component({
  selector: 'app-checkbox-example',
  imports: [
    CheckboxComponent
  ],
  template: `...`
})
export class CheckboxExampleComponent {}

Install

bash

npx ply-ui-cli add checkbox

Installation

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

bash

npx ply-ui-cli add 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 checkbox
// Paths are relative to aliases.components (default: src/app/components)
import { CheckboxComponent } from './checkbox/checkbox.component';

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

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

API reference for checkbox
API	Member	Type	Default	Description
`ply-checkbox`	`color`	`CheckboxColor`	`'primary'`	The semantic visual color. Defaults to 'primary'.
`ply-checkbox`	`disabled`	`boolean`	`false`	Whether the control is disabled (consumer-facing input).
`ply-checkbox`	`checked`	`boolean`	`false`	The checked state of the checkbox. Bound via ngModel.
`ply-checkbox`	`indeterminate`	`boolean`	`false`	Marks the checkbox as visually/semantically indeterminate (mixed) state, e.g. for a "select all" checkbox when only some items are selected. Defaults to false.
`ply-checkbox`	`ariaLabel`	`string \| undefined`	`undefined`	Optional accessible name applied directly to the native `<input>`. Use this instead of `[attr.aria-label]` on `<ply-checkbox>` itself — the host element isn't the focusable/interactive part, so an attribute bound to the host would never reach assistive tech.

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