ArcaneCheckbox#

A styled checkbox component for boolean on/off selections. Supports labels, disabled states, and custom styling.

Basic Usage#

ArcaneCheckbox(
  value: isChecked,
  onChanged: (value) {
    setState(() => isChecked = value);
  },
)

Properties#

With Label#

ArcaneCheckbox(
  label: 'I agree to the terms and conditions',
  value: agreedToTerms,
  onChanged: (value) {
    setState(() => agreedToTerms = value);
  },
)

Sizes#

// Small
ArcaneCheckbox(
  size: CheckboxSize.small,
  value: isChecked,
  onChanged: (value) {},
)

// Medium (default)
ArcaneCheckbox(
  size: CheckboxSize.medium,
  value: isChecked,
  onChanged: (value) {},
)

// Large
ArcaneCheckbox(
  size: CheckboxSize.large,
  value: isChecked,
  onChanged: (value) {},
)

States#

Disabled#

ArcaneCheckbox(
  label: 'Cannot change',
  value: true,
  isDisabled: true,
)

Read-Only (via null handler)#

ArcaneCheckbox(
  label: 'Read only',
  value: true,
  onChanged: null,
)

Examples#

Settings List#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.md,
  ),
  children: [
    ArcaneCheckbox(
      label: 'Enable notifications',
      value: notifications,
      onChanged: (v) => setState(() => notifications = v),
    ),
    ArcaneCheckbox(
      label: 'Dark mode',
      value: darkMode,
      onChanged: (v) => setState(() => darkMode = v),
    ),
    ArcaneCheckbox(
      label: 'Auto-save',
      value: autoSave,
      onChanged: (v) => setState(() => autoSave = v),
    ),
  ],
)

Terms Agreement#

ArcaneDiv(
  styles: const ArcaneStyleData(
    display: Display.flex,
    flexDirection: FlexDirection.column,
    gap: Gap.lg,
  ),
  children: [
    ArcaneCheckbox(
      label: 'I agree to the Terms of Service',
      value: agreedToTerms,
      onChanged: (v) => setState(() => agreedToTerms = v),
    ),
    ArcaneCheckbox(
      label: 'I agree to the Privacy Policy',
      value: agreedToPrivacy,
      onChanged: (v) => setState(() => agreedToPrivacy = v),
    ),
    ArcaneButton.primary(
      label: 'Continue',
      isDisabled: !agreedToTerms || !agreedToPrivacy,
      onPressed: handleContinue,
    ),
  ],
)

Multiple Selection#

class MultiSelect extends StatefulComponent {
  final List<String> options = ['Option A', 'Option B', 'Option C'];
  final Set<String> selected = {};

  @override
  Iterable<Component> build(BuildContext context) sync* {
    for (final option in options) {
      yield ArcaneCheckbox(
        label: option,
        value: selected.contains(option),
        onChanged: (checked) {
          setState(() {
            if (checked) {
              selected.add(option);
            } else {
              selected.remove(option);
            }
          });
        },
      );
    }
  }
}

Related Components#

• ArcaneRadio - Single selection from options
• ArcaneToggleSwitch - Toggle switch
• ArcaneToggleButton - Toggle button