components/forms/flutstrap_checkbox library Components Forms

Flutstrap Checkbox

A high-performance, accessible checkbox component with comprehensive theming, smooth animations, and Bootstrap-inspired variants.

{@tool snippet}

Basic Usage

// Basic checkbox
FlutstrapCheckbox(
  value: _isChecked,
  onChanged: (value) => setState(() => _isChecked = value!),
  label: 'Accept terms and conditions',
)

// Checkbox with variant
FlutstrapCheckbox(
  value: _isSuccess,
  onChanged: (value) => setState(() => _isSuccess = value!),
  variant: FSCheckboxVariant.success,
  label: 'Completed',
)

// Disabled checkbox
FlutstrapCheckbox(
  value: true,
  onChanged: null,
  label: 'Disabled checkbox',
  disabled: true,
)

// Tri-state checkbox
FlutstrapCheckbox(
  value: _triStateValue,
  onChanged: (value) => setState(() => _triStateValue = value),
  tristate: true,
  label: 'Tri-state option',
)

// Using convenience methods
FlutstrapCheckbox(
  value: _isChecked,
  onChanged: (value) => setState(() => _isChecked = value!),
).success().withLabel('Success state')

{@endtool}

Performance Features

  • Style Caching: Checkbox styles cached by variant, size, and theme
  • Efficient Rendering: Minimal rebuilds with optimized state management
  • Smooth Animations: Hardware-accelerated transitions for state changes
  • Memory Management: Proper resource disposal and cache management

Accessibility

  • Full screen reader support with semantic labels
  • Keyboard navigation with focus indicators
  • Proper ARIA attributes for checkbox states
  • High contrast support for visually impaired users

Checkbox Best Practices

  • Always provide meaningful labels for each checkbox option
  • Use semanticLabel for complex custom labels
  • Group related checkboxes together semantically
  • Provide validation feedback for required fields
  • Use tri-state for hierarchical selections (select all/none/some)

Enums

FSCheckboxSize
Flutstrap Checkbox Size
FSCheckboxVariant
Flutstrap Checkbox Variants