Rating

Star ratings for reviews and feedback, with keyboard support, half stars and a read-only mode for averages.

How it works

A bsRating is one role="slider" tab stop, named with aria-label or aria-labelledby. Hover previews a rating and a click sets it. Arrow keys change it by one star, and Home and End go to the lowest and highest rating. Its value is a number from 0 (not rated) to max; bind it with [(value)], [formControl], [(ngModel)] or [formField].

Value: 3

<div bsRating aria-label="Rating" [(value)]="rating"></div>
<p class="mt-3 mb-0 fg-3">Value: {{ rating() }}</p>

Half stars

Set allowHalf to pick half stars: click the first half of a star, or press an arrow key to move by half a star.

Value: 2.5

<div bsRating aria-label="Rating" allowHalf [(value)]="rating"></div>
<p class="mt-3 mb-0 fg-3">Value: {{ rating() }}</p>

Read-only

Set readonly to show a rating, such as an average, that can’t be changed. Fractional values fill stars partially. Screen readers still reach it and hear its value.

4.3 from 128 reviews

HTML

<div class="d-flex align-items-center gap-3">
  <div bsRating readonly aria-label="Average rating" [value]="4.3"></div>
  <span class="fg-3">4.3 from 128 reviews</span>
</div>

Resettable

Set resettable to let the rating be cleared back to 0: click the current rating again, or press Home, Delete or Backspace.

Value: 2

<div bsRating aria-label="Rating" resettable [(value)]="rating"></div>
<p class="mt-3 mb-0 fg-3">Value: {{ rating() || 'not rated' }}</p>

Sizes and number of stars

Set size to sm or lg, and max to change the number of stars.

HTML

<div class="d-flex flex-column gap-3">
  <div bsRating size="sm" aria-label="Small rating" [value]="3"></div>
  <div bsRating aria-label="Default rating" [value]="3"></div>
  <div bsRating size="lg" aria-label="Large rating" [value]="3"></div>
  <div bsRating max="10" aria-label="Rating out of 10" [value]="7"></div>
</div>

Themes

Filled stars use the warning theme color. Set theme to use another one.

HTML

<div class="d-flex flex-column gap-3">
  <div bsRating theme="primary" aria-label="Primary rating" [value]="4"></div>
  <div bsRating theme="success" aria-label="Success rating" [value]="4"></div>
  <div bsRating theme="danger" aria-label="Danger rating" [value]="4"></div>
</div>

Custom stars

Put an <ng-template bsRatingStar> inside to draw your own symbol. The template gets how full the star is, from 0 to 1, as let-fill, and its position as let-i="index". Mark the symbol aria-hidden="true"; the slider announces the value.

<div bsRating aria-label="How much do you like it?" [(value)]="rating">
  <ng-template bsRatingStar let-fill>
    <svg
      width="1em"
      height="1em"
      viewBox="0 0 16 16"
      aria-hidden="true"
      [class]="fill ? 'fg-danger' : 'fg-3'"
      [attr.fill]="fill ? 'currentColor' : 'none'"
      stroke="currentColor"
      stroke-width="1.25">
      <path d="M8 14s-5.5-3.4-5.5-7.4A3 3 0 0 1 8 4.4a3 3 0 0 1 5.5 2.2C13.5 10.6 8 14 8 14z" />
    </svg>
  </ng-template>
</div>

Disabled

Disable the rating, or its form control. A disabled rating leaves the tab order.

HTML

<div bsRating disabled aria-label="Rating" [value]="3"></div>

With forms

In a bsFormField, the rating is described by the help text and shows feedback once it is touched and invalid. The empty stars turn red while it is invalid. Labels can’t point to a slider with for, so name it with aria-labelledby. Set valueText to translate what screen readers announce, such as “3 out of 5”.

How was our service?

Pick a rating.

Your feedback helps us improve.

Value: empty

<div bsFormField>
  <div class="form-label" id="service-rating-label">How was our service?</div>
  <div bsRating aria-labelledby="service-rating-label" [formControl]="rating"></div>
  <div bsInvalidFeedback>Pick a rating.</div>
  <small bsFormText>Your feedback helps us improve.</small>
</div>
<p class="mt-3 mb-0 fg-3">Value: {{ rating.value ?? 'empty' }}</p>

API

BsRating

Selector: div[bsRating] · Exported as: bsRating

Inputs

Name	Type	Default	Description
`value`	`number`	`0`	The rating, from 0 (not rated) to max. Supports [(value)].
`max`	`number`	`5`	Number of stars.
`allowHalf`	`boolean`	`false`	Lets pointer and keyboard pick half stars.
`readonly`	`boolean`	`false`	Shows the rating without letting it change.
`resettable`	`boolean`	`false`	Lets the rating be cleared by clicking the current rating, or with Home, Delete or Backspace.
`disabled`	`boolean`	`false`	Disables the rating. Forms set this through disable().
`theme`	`BsTheme`	`'warning'`	Theme color of the filled stars.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the stars.
`valueText`	`(value: number, max: number) => string`	`“3 out of 5”`	Text screen readers announce for a value.
`id`	`string`	`generated`	Element id.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles. auto follows the bound Angular form control.

Outputs

Name	Type	Description
`valueChange`	`number`	Emits the rating when it changes.

BsRatingStar

Selector: ng-template[bsRatingStar]