Overview

Components Inputs Input Checkbox Group

Overview API Examples Style Tokens

The Input Checkbox Group component provides a managed collection of checkboxes with shared labeling, group validation, and accessibility features.

Basic usage

The Input Checkbox Group implements FormGroupDirective to handle multiple checkbox controls as a unified group.

Component anatomy

Group Structure

Configure group content with:

Group label via lmn-input-label
Group description via lmn-input-hint
Error messages via lmn-input-error
Alert messages via lmn-input-alert
Multiple checkbox components

Form Integration

Manage form state through:

FormGroup binding
Group-level validation
Individual checkbox controls
Change detection
Touch tracking

Required State

Handle required validation with:

required Input for group validation
requiredMarker Input for visual indicator
Required state propagation
Validation messaging
Error state styling

Disabled State

Control disabled behavior using:

Group-level disable
disabledMarker Input for text indicator
disabledReason Input for tooltip
Info button for details
Visual feedback

Error States

Manage error states through:

Group-level validation
Individual checkbox validation
Error message display
Visual error indicators
Error state styling

Negative Theme

Enable dark theme using the negative Input, affecting:

Background colors
Text colors
Border colors
Icon colors
Error states

Accessibility

ARIA Support

Complete group accessibility:

group role
Label relationships
Error announcements
Required/disabled states
Helper text connections

Enhanced keyboard support:

Arrow key navigation between checkboxes
Space/Enter for selection
Tab navigation through group
Focus management
Group boundary awareness

Focus Management

Careful focus handling:

Sequential checkbox 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