### 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` `OnInit` `AfterViewInit` `OnDestroy`

### Metadata

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

### Index

###### Properties
ratingButtons role
###### Methods
Public onFocusOut Public registerOnChange Public registerOnTouched Public setDisabledState Public writeValue
###### Inputs
ariaLabel euiDisabled numberOfStars rating
###### Outputs
ratingChange
###### HostBindings
attr.role class
###### Accessors
cssClasses

### Inputs

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

euiDisabled
Type : `boolean`
Default value : `false`
Whether the toggle is disabled

numberOfStars
Type : `number`
Default value : `5`
Current numbers of stars rating to display

rating
Type : `number`
Default value : `0`
Current rating number

### Outputs

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

### HostBindings

attr.role
Type : `string`
Default value : `'radiogroup'`
Binds the role attribute to the component.

class
Type : `string`
CSS classes applied to the host element

### 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})`

role
Type : `string`
Default value : `'radiogroup'`
Decorators : `@HostBinding('attr.role')`
Binds the role attribute to the component.

### Accessors

cssClasses
get `cssClasses()`
CSS classes applied to the host element Returns : `string`

# results matching ""

# No results matching ""