# EuiRatingComponent

**Type:** component



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
```html
<eui-rating [(rating)]="userRating"></eui-rating>
```

### With reactive forms
```typescript
ratingControl = new FormControl(3);
```
```html
<eui-rating [formControl]="ratingControl" [numberOfStars]="5"></eui-rating>
```

### Disabled state
```html
<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


**Selector:** `eui-rating`

## Inputs
- **ariaLabel**: `string` - Binds the aria-label attribute to the component.
- **euiDisabled**: `boolean` - Whether the toggle is disabled
- **numberOfStars**: `number` - Current numbers of stars rating to display
- **rating**: `number` - Current rating number

## Outputs
- **ratingChange**: `EventEmitter` - Event emitted when toggle state changes