### File

`packages/components/eui-rating/eui-rating.component.ts`

### Description

Interactive star rating component for collecting user feedback and displaying rating values. Implements ControlValueAccessor for seamless integration with Angular reactive and template-driven forms. Supports keyboard navigation with arrow keys, Home, and End for accessibility. Provides customizable number of stars and visual feedback for current rating state. Commonly used for product reviews, feedback forms, and quality assessments.

### Basic usage

Example :

    <eui-rating [(rating)]="userRating"></eui-rating>

### With reactive forms

Example :

    ratingControl = new FormControl(3);

Example :

    <eui-rating [formControl]="ratingControl" [numberOfStars]="5"></eui-rating>

### Disabled state

Example :

    <eui-rating [rating]="4" [euiDisabled]="true"></eui-rating>

### Accessibility

- Full keyboard navigation: Arrow keys to change rating, Home/End for first/last
- ARIA radiogroup role with proper labeling
- Each star is focusable and announces its value to screen readers
- Visual focus indicators for keyboard users

### Notes

- Click same star again to clear rating (set to 0)
- Only one star is focusable at a time (roving tabindex pattern)
- Emits `ratingChange` event on user interaction

### Implements

`ControlValueAccessor`

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective`
host | `{ }`
providers | `)`
selector | `eui-rating`
imports | `ReactiveFormsModule` `EUI_ICON` `EUI_BUTTON`
templateUrl | `./eui-rating.component.html`
styleUrl | `./eui-rating.scss`

### Index

###### Properties

- ratingButtons

###### Methods

- Public onFocusOut
- Public registerOnChange
- Public registerOnTouched
- Public setDisabledState
- Public writeValue

###### Inputs

- ariaLabel
- euiDisabled
- numberOfStars
- rating

###### Outputs

- ratingChange

### Constructor

`constructor()`

### Inputs

ariaLabel
Default value : `'eUI Rating'`
Binds the aria-label attribute to the component.

euiDisabled
Default value : `false, { transform: booleanAttribute }`
Whether the toggle is disabled

numberOfStars
Default value : `5, { transform: numberAttribute }`
Current numbers of stars rating to display

rating
Default value : `0, { transform: numberAttribute }`
Current rating number

### Outputs

ratingChange
Type : `number`
Event emitted when toggle state changes

### Methods

Public onFocusOut
`onFocusOut()`
Handles focus out event Notifies form control of touch event Returns : `void`

Public registerOnChange
`registerOnChange(fn: any)`

Implements ControlValueAccessor Registers change handler

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public registerOnTouched
`registerOnTouched(fn: any)`

Implements ControlValueAccessor Registers touch handler

Parameters :

Name | Type | Optional
fn | `any` | No

Returns : `void`

Public setDisabledState
`setDisabledState(isDisabled: boolean)`

Implements ControlValueAccessor Updates the rating's disabled state

Parameters :

Name | Type | Optional
isDisabled | `boolean` | No

Returns : `void`

Public writeValue
`writeValue(value: number)`

Implements ControlValueAccessor Updates the toggle's checked state

Parameters :

Name | Type | Optional
value | `number` | No

Returns : `void`

### Properties

ratingButtons
Type : `QueryList<ElementRef>`
Decorators : `@ViewChildren('euiRatingButtonRef', {read: ElementRef})`

# results matching ""

# No results matching ""