Input Rating

The Input Rating component provides an interactive star rating interface with customizable icons, keyboard navigation, and form integration.

Basic usage

The Input Rating component implements ControlValueAccessor for form integration and provides a visual rating system.

Component anatomy

Rating Scale

Configure the rating scale using:

• maxValue Input: Set number of stars (1-10, default 5)
• value Input: Current rating (0 to maxValue)
• Form control binding for value management
• Automatic validation of input ranges

Icons

Customize rating visuals with:

• iconEmptySvgName Input: Unselected state icon
• iconFilledSvgName Input: Selected state icon
• Automatic state switching
• Size and spacing consistency
• RTL support

Selection Label

Control label display using:

• showActiveSelectionLabel Input: Toggle visibility
• activeSelectionLabelSingular: Single item text
• activeSelectionLabelPlural: Multiple items text
• Automatic pluralization
• Screen reader support

Keyboard Navigation

Comprehensive keyboard support:

• Left/Right arrows for RTL-aware navigation
• Up/Down arrows for value adjustment
• Circular navigation at boundaries
• Focus management
• ARIA role integration

Form Integration

Complete form control features:

• Value accessor implementation
• Touch tracking
• Change detection
• Disabled state support
• Focus management

Negative Theme

Enable dark theme using the negative Input, affecting:

• Icon colors
• Label colors
• Focus indicators
• Button states

Accessibility

ARIA Implementation

Complete ARIA integration:

• radiogroup role for container
• radio role for rating buttons
• Selected state tracking
• Label relationships
• Value announcements

Keyboard Navigation

Full keyboard support:

• Arrow key navigation
• RTL adaptation
• Circular navigation
• Focus management
• Button activation

Screen Reader Support

Enhanced value communication:

• Current rating announcements
• Label integration
• State changes
• Range context
• Button purposes

Best Practices for Developers

1. Scale Configuration DEMO HERE

2. Label Implementation DEMO HERE

3. Form Integration DEMO HERE