eui documentation
  1. Components
  2. EuiRatingComponent

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
Methods
Inputs
Outputs
HostBindings
Accessors

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
getcssClasses()

CSS classes applied to the host element

Returns : string

results matching ""

    No results matching ""