# Rating
Bind `value` and listen to `valueChange`, cap the scale with `max`, toggle `readOnly` when the score is informational, and use `showValue` when the numeric ratio should stay visible beside the stars. `ariaLabel` and the two formatter inputs localize copy without reimplementing the control.
## Import
```ts
import { RatingComponent } from 'ui';
```
## Controlled value
```ts
import { Component, signal } from '@angular/core';
import { RatingComponent } from 'ui';
@Component({
selector: 'app-rating-basic-example',
standalone: true,
imports: [RatingComponent],
template: `
Current value {{ value() }} of 5
`,
})
export class RatingBasicExampleComponent {
protected readonly value = signal(3);
}
```
## Density and modes
```ts
import { Component, signal } from '@angular/core';
import { RatingComponent, Size } from 'ui';
@Component({
selector: 'app-rating-sizes-states-example',
standalone: true,
imports: [RatingComponent],
template: `
@for (size of sizes; track size) {
{{
size
}}
}
Editable
Read-only
Disabled
`,
})
export class RatingSizesStatesExampleComponent {
protected readonly sizes: Size[] = ['small', 'medium', 'large'];
protected readonly editable = signal(2);
}
```
## Scale and published scores
```ts
import { Component, signal } from '@angular/core';
import { RatingComponent } from 'ui';
@Component({
selector: 'app-rating-scale-example',
standalone: true,
imports: [RatingComponent],
template: `
`,
})
export class RatingScaleExampleComponent {
protected readonly shortScale = signal(4);
protected readonly longScale = signal(7);
}
```
## Names and formatters
```ts
import { Component, signal } from '@angular/core';
import { RatingComponent } from 'ui';
@Component({
selector: 'app-rating-labels-example',
standalone: true,
imports: [RatingComponent],
template: `
Group and star labels override defaults for product copy or i18n.
`,
})
export class RatingLabelsExampleComponent {
protected readonly value = signal(0);
protected readonly starLabel = (star: number, max: number) =>
`Set satisfaction to ${star} out of ${max}`;
protected readonly summaryLabel = (v: number, max: number) =>
v === 0 ? `Satisfaction not chosen, scale is ${max} stars` : `Satisfaction ${v} out of ${max}`;
}
```
## Listing row
```ts
import { Component } from '@angular/core';
import { ButtonComponent, RatingComponent } from 'ui';
@Component({
selector: 'app-rating-listing-snapshot-example',
standalone: true,
imports: [ButtonComponent, RatingComponent],
template: `
Weekly digest template
Workflow ยท 128 ratings
Use template
`,
})
export class RatingListingSnapshotExampleComponent {}
```
## Feedback form
```ts
import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ButtonComponent, RatingComponent, TextareaComponent } from 'ui';
@Component({
selector: 'app-rating-review-feedback-example',
standalone: true,
imports: [ReactiveFormsModule, ButtonComponent, RatingComponent, TextareaComponent],
template: `
`,
})
export class RatingReviewFeedbackExampleComponent {
protected readonly stars = signal(0);
protected readonly form = new FormGroup({
comment: new FormControl('', { nonNullable: true }),
});
protected submit(): void {
if (this.stars() === 0) {
return;
}
this.clear();
}
protected clear(): void {
this.stars.set(0);
this.form.reset({ comment: '' });
}
}
```
## Accessibility
### Roles and states
Interactive ratings expose `role="radiogroup"` on the root with `aria-disabled` when needed. Stars are `role="radio"` with `aria-checked` reflecting the filled state. Read-only mode uses `role="img"` on the root with `aria-readonly="true"` and static star nodes instead of buttons.
### Names
Set `ariaLabel` for the group when the visible heading alone is insufficient. Per-star labels come from `starAriaLabelFormatter` or i18n defaults. The group label uses `currentValueAriaLabelFormatter` or i18n unless `ariaLabel` is set.
### Keyboard and focus
Arrow keys move between stars, Home selects the first star, End the last, Space and Enter commit the focused star. A single star stays in the tab order at a time via `tabindex` so focus does not walk every glyph.