Free
Pro

Checkbox

Base UI (Angular) 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 base-ui-cli add checkbox.

free

Default Checkbox

Default Checkbox example below.


HTML

Default Checkbox disabled

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


HTML

Checkbox with helper text

Checkbox with helper text example below.


HTML

Checkbox colors

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


HTML

Installation

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

bash

npx base-ui-cli add 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 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
APIMemberTypeDefaultDescription
base-checkboxcolorCheckboxColor'primary'The semantic visual color. Defaults to 'primary'.
base-checkboxdisabledbooleanfalseWhether the control is disabled (consumer-facing input).
base-checkboxcheckedbooleanfalseThe checked state of the checkbox. Bound via ngModel.
base-checkboxindeterminatebooleanfalseMarks the checkbox as visually/semantically indeterminate (mixed) state, e.g. for a "select all" checkbox when only some items are selected. Defaults to false.
base-checkboxariaLabelstring | undefinedundefinedOptional accessible name applied directly to the native `<input>`. Use this instead of `[attr.aria-label]` on `<base-checkbox>` itself — the host element isn't the focusable/interactive part, so an attribute bound to the host would never reach assistive tech.