Form

Rating

A score out of a few stars — hover to preview, click or use the arrow keys to rate.

Features10

API

Theming

Basic

Five stars bound with ngModel. Tab to it and use the arrow keys, or a number key.

Value: 4

Half

allowHalf: the left half of a star rates x.5 and the arrow keys move by half a star.

Value: 3.5

Clear

clearable shows a clear button while there is a rating; clearLabel adds text next to it. Delete and Backspace clear from the keyboard.

9 lines

<div class="list">  <tx-rating ariaLabel="With clear icon" [clearable]="true" [(ngModel)]="first" />  <tx-rating    ariaLabel="With clear text"    [clearable]="true"    clearLabel="Reset"    [(ngModel)]="second"  /></div>

Stars

stars sets how many there are.

Icons

onIcon and offIcon use any icon — half stars still work.

8 lines

<tx-rating    ariaLabel="Love"    onIcon="heart-fill"    offIcon="heart-fill"    [allowHalf]="true"    [dt]="{ root: { activeColor: '#e11d48', hoverColor: '#fb7185' } }"    [(ngModel)]="love"  />

Template

<ng-template txRatingOnIcon> and txRatingOffIcon draw your own marks.

8 lines

<tx-rating ariaLabel="Mood" [stars]="5" [(ngModel)]="mood">  <ng-template txRatingOnIcon let-index    ><span class="face">{{ faces[index] }}</span></ng-template  >  <ng-template txRatingOffIcon let-index    ><span class="face off">{{ faces[index] }}</span></ng-template  ></tx-rating>

Sizes

small, medium and large.

5 lines

<div class="list">  <tx-rating size="small" ariaLabel="Small" [ngModel]="3" />  <tx-rating ariaLabel="Medium" [ngModel]="3" />  <tx-rating size="large" ariaLabel="Large" [ngModel]="3" /></div>

States

readonly shows a score that cannot change — for reviews; disabled dims it.

4.5 · 128 reviews

13 lines

<div class="list">  <div class="review">    <tx-rating      size="small"      ariaLabel="Average rating"      [readonly]="true"      [allowHalf]="true"      [ngModel]="4.5"    />    <span class="hint">4.5 · 128 reviews</span>  </div>  <tx-rating ariaLabel="Disabled" [disabled]="true" [ngModel]="2" /></div>

Form

Validators.required inside tx-field — the field names the rating and shows the error.

How was your support chat?

10 lines

<div class="form">  <tx-field    label="How was your support chat?"    [required]="true"    [messages]="{ required: 'Pick a rating to send' }"  >    <tx-rating [formControl]="score" [clearable]="true" />  </tx-field>  <button txButton (click)="score.markAsTouched()">Send</button></div>

Design tokens

[dt] changes the rating tokens of one rating.