---
title: Rating
category: components
b2c: true
expert: true
stable: done
a1: true
---

### Examples

#### Basic Example

<!-- example(rating-basic) -->

#### Disabled Rating

<!-- example(rating-disabled) -->

#### Negative Styling

<!-- example(rating-negative) -->

#### Simple Binding

<!-- example(rating-simple) -->

#### Template-driven with ngModel

<!-- example(rating-template) -->

#### Reactive

<!-- example(rating-reactive) -->

#### Sizes

<!-- example(rating-sizes) -->

### Accessibility

The component can be accessed via keyboard. To do that, use the TAB-key to focus on one of the stars and hit the ENTER-key to select it. Alternatively, increase or decrease the selected value by hitting the LEFT-ARROW- or RIGHT-ARROW-key. Moreover, it is possible to provide custom descriptions for each star. Please refer to `ariaLabel` in the API section for more information.

<!-- example(rating-accessibility) -->
