RonakCN

Checkbox

In ProgressDark modeRTL

A checkable input with checked, unchecked, and indeterminate states.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

Installation

Copy the component into your project using the CLI:

$ronakcn add checkbox

Usage

Import and use the component in your Flutter widget tree:

lib/pages/example.dart
import 'package:flutter/material.dart';
import '../components/checkbox/checkbox.dart';

class ExamplePage extends StatelessWidget {
  const ExamplePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('RcnCheckbox Example')),
      body: Center(
        child: RcnCheckbox(
          // Configure props here
        ),
      ),
    );
  }
}

Variants

Checkbox ships with the following variants:

default

A standard checkbox.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

checked

Pre-checked checkbox state.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

unchecked

Unchecked checkbox state.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

indeterminate

Partial / indeterminate state.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

disabled

Non-interactive disabled checkbox.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

with-description

Checkbox with a helper description.

7:21
Accept terms and conditions
Send me marketing emails
Newsletter
Weekly updates about new features
Some items selected
Disabled option

Props

PropTypeDefaultDescription
valuebool?falseCurrent checked state.
onChanged*ValueChanged<bool?>—Called when state changes.
labelString?nullLabel displayed beside checkbox.
descriptionString?nullHelper text below the label.
enabledbooltrueWhether the checkbox is enabled.
tristateboolfalseAllows indeterminate state.

Source files

lib/components/ui/checkbox.dart
import 'package:flutter/material.dart';

class RcnCheckbox extends StatelessWidget {
  const RcnCheckbox({
    super.key,
    this.value = false,
    required this.onChanged,
    this.label,
    this.description,
    this.enabled = true,
    this.tristate = false,
  });

  final bool? value;
  final ValueChanged<bool?> onChanged;
  final String? label;
  final String? description;
  final bool enabled;
  final bool tristate;

  @override
  Widget build(BuildContext context) {
    final colors = Theme.of(context).colorScheme;
    return GestureDetector(
      onTap: enabled ? () => onChanged(value == true ? false : true) : null,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Checkbox(
            value: value,
            tristate: tristate,
            onChanged: enabled ? onChanged : null,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
          ),
          if (label != null)
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(height: 2),
                  Text(label!, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onSurface)),
                  if (description != null)
                    Text(description!, style: TextStyle(fontSize: 12, color: colors.onSurface.withOpacity(0.6))),
                ],
              ),
            ),
        ],
      ),
    );
  }
}
Version 0.1.0 · input category