Input Radio Group
The Input Radio Group component provides a managed collection of radio buttons with shared validation, labeling, and accessibility features.
Basic usage
The Input Radio Group implements FormGroupDirective to manage a collection of radio inputs with form integration.
Component anatomy
Group Structure
Configure group content with:
- Group label via
lmn-input-label - Group description via
lmn-input-hint - Individual radio buttons
- Error messages
- Alert messages
- Required/disabled markers
Radio Options
Each radio button in the group supports:
- Value binding
- Label content
- Disabled state with reason tooltip
- Hint text
- Error messages
- Ripple effect feedback
Selection Control
Manage selection through:
- Single selection model
- Form control integration
- Change detection
- Value updates
- Disabled state handling
Validation States
Handle form validation with:
- Required state
- Error messages
- Visual error indicators
- Alert messages
- Helper text
- Validation state styling
Disabled State
Control disabled behavior using:
- Group-level disable
- Individual option disable
- Disabled markers
- Reason tooltips
- Info buttons
- Visual feedback
Negative Theme
Enable dark theme using the negative Input, affecting:
- Background colors
- Text colors
- Border colors
- Icons and buttons
- Error states
- Focus indicators
Accessibility
ARIA Support
Complete group accessibility:
- radiogroup role
- Label relationships
- Required state indication
- Error announcements
- Helper text connections
- State descriptions
Keyboard Navigation
Enhanced keyboard support:
- Arrow keys for option navigation
- Space/Enter for selection
- Tab navigation
- Focus management
- Group boundary awareness
Focus Management
Careful focus handling:
- Sequential radio focus
- Group context retention
- Error state focus
- Disabled state handling
- Info button access
Best Practices for Developers
Group Configuration DEMO HERE
Validation Implementation DEMO HERE
State Management DEMO HERE