Three state checkbox with angular 2

I want to do an input box with three states: checked, unchecked and crossed(a.k.a failed) Currently, I was able to do check/uncheck and change calculations accordingly

 <input type="checkbox" [ngStyle]="{content: expression}" *ngIf="milestone?.description" [checked]="milestone?.status == 'checked'"
                    (change)="checkMilestone(milestone,initiative, $event, '')">

However, I have trouble adding crossed (X) checkbox. Does anyone have idea how it should be done? Should I have states something like this:

  states = [
{ id: 0, status: 'checked'},
{ id: 1, status: 'unchecked'},
{ id: 2, status: 'crossed'}

];

and add styles and change them accordingly? I'm not sure how to add three styles instead of two.