Input Toggle

The Input Toggle component provides a customizable switch control with support for labels, hints, loading states, and form integration.

Basic usage

The Input Toggle implements ControlValueAccessor for form integration and supports reactive forms.

Component anatomy

Toggle States

Control the toggle state through:

• value Input: boolean value
• Form control binding
• loading Input: Shows loading spinner
• disabled Input: Disables interaction
• Visual feedback for all states

Labels and Hints

Configure supporting text with:

• Label content projection
• Hint content projection
• Alert messages
• Required/disabled markers
• Language indicators

Loading State

Manage loading feedback using:

• loading Input: Shows spinner
• loadingReason Input: Screen reader text
• Automatic disable during loading
• Spinner animation
• State preservation

Disabled State

Control disabled behavior with:

• disabled Input or form control
• disabledMarker Input: Text indicator
• disabledReason Input: Tooltip content
• Visual feedback
• Focus management

Visual Feedback

Provides rich interaction feedback:

• Ripple effect on click
• Smooth transitions
• Hover states
• Focus indicators
• Active state indication

Negative Theme

Enable dark theme using the negative Input, affecting:

• Background colors
• Knob colors
• Icon colors
• Text colors
• Focus indicators

Accessibility

ARIA Support

Complete ARIA implementation:

• Proper checkbox role
• Label relationships
• State descriptions
• Loading announcements
• Disabled state management

Keyboard Navigation

Full keyboard support:

• Space/Enter for toggle
• Tab navigation
• Focus indication
• State announcements
• Loading state handling

Screen Reader Support

Enhanced screen reader experience:

• State changes
• Loading feedback
• Error messages
• Disabled reasons
• Helper text

Best Practices for Developers

1. Form Integration DEMO HERE

2. State Management DEMO HERE

3. Label Guidelines DEMO HERE