mat-tristate-checkbox

<mat-tristate-checkbox> provides the same functionality as the Angular Material checkbox enhanced with 3 states.

Release hints

Starting with version 16 this package is unscoped (i.e. is named 'mat-image-overflow' not '@bepo65/mat-image-overflow').

Prerequisites

The package can be used in Angular apps with Angular Material installed. This Version requires Angular 16.

Installation of checkbox

npm install mat-tristate-checkbox

Sample usage of checkbox

Now you can use the mat-tristate-checkbox component in your app components, for example in app.module.ts:

import { MatTristateCheckboxComponent } from 'mat-tristate-checkbox';
...
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ...
    MatTristateCheckboxComponent
  ],
  ...
})
export class AppModule { }

And in template file app.component.html:

<form [formGroup]="form">
  <mat-tristate-checkbox formControlName="keepMeLoggedIn">remember me</mat-tristate-checkbox>
</form>

Demo project

Try out the demo page.

Properties of checkbox

Name	Description
@Input() color: ThemePalette	Theme color palette for the component. Defaults to 'accent'
@Input() disabled: any	Whether the checkbox is disabled.
@Input() labelPosition: 'before' | 'after'	Whether the label should appear after or before the checkbox. Defaults to 'after'

Values of checkbox

The value aof the checkbox cycle through these values:

undefined > false > true

Changelog

For list of changes and bugfixes, see CHANGELOG.md.

License

Copyright © 2024 Bernhard Pottler.

Distributed under the MIT License. See LICENSE for more information.

This project uses the fonts 'Roboto' and 'Material Icons' from the Google Fonts Library that are licensed under the Apache License Version 2.0.