Overview

Components Inputs Input Checkbox

Overview API Examples Style Tokens

The Input Checkbox component provides a customizable checkbox control with rich state management, form integration, and accessibility features.

Basic usage

The Input Checkbox implements ControlValueAccessor for form integration and supports various states and content projections.

Component anatomy

Content Structure

Configure checkbox content using:

Label via lmn-input-label
Hint messages via lmn-input-hint
Error messages via lmn-input-error
Alert messages via lmn-input-alert
Required/disabled markers

States

Manage checkbox states through:

checked: Boolean checked state
indeterminate: Partial selection state
disabled: Disabled state with optional reason
required: Required validation
Form control integration

Visual Feedback

Rich interaction indicators:

Ripple effect on click
Hover state highlighting
Focus ring for keyboard navigation
Error state visualization
Custom icons for states

Disabled State

Enhanced disabled state features:

Disabled marker text
Optional reason tooltip
Info button with popup
Customizable disabled styles
Screen reader support

Form Integration

Complete form control features:

Value accessor implementation
Change tracking
Touch detection
Validation states
Error handling
Group integration

Negative Theme

Enable dark theme using the negative Input, affecting:

Background colors
Border colors
Icon colors
Text colors
Interactive states

Accessibility

ARIA Support

Comprehensive ARIA implementation:

checkbox role
checked/indeterminate states
Label relationships
Error announcements
Disabled state descriptions
Helper text connections

Full keyboard support:

Space for toggle
Tab navigation
Focus indicators
Disabled handling
Info button access

Enhanced information for:

State changes
Error messages
Required status
Disabled reasons
Helper text

Best Practices for Developers

Label Usage DEMO HERE
State Management DEMO HERE
Form Integration DEMO HERE