Checkbox

For touch devices, a switch is generally recommended over this.

We recommend using a select group to create a group of checkboxes.

class Page extends StatefulWidget {
  @override
  State<Page> createState() => PageState();
}

class PageState extends State<Page> {
  bool _state = false;

  @override
  Widget build(BuildContext context) => FCheckbox(
    label: const Text('Accept terms and conditions'),
    description: const Text('You agree to our terms and conditions.'),
    semanticsLabel: 'Accept terms and conditions',
    value: _state,
    onChange: (value) => setState(() => _state = value),
    enabled: true,
  );
}

CLI

To generate and customize this style:

dart run forui style create checkbox

Usage

`FCheckbox(...)`

FCheckbox(
  label: const Text('Accept terms and conditions'),
  description: const Text('You agree to our terms and conditions.'),
  error: const Text('Please accept the terms and conditions.'),
  semanticsLabel: 'Accept terms and conditions',
  style: (style) => style.copyWith(...),
  value: true,
  onChange: (value) {},
  enabled: true,
  autofocus: true,
);

Examples

Disabled

class Page extends StatefulWidget {
  @override
  State<Page> createState() => PageState();
}

class PageState extends State<Page> {
  bool _state = true;

  @override
  Widget build(BuildContext context) => FCheckbox(
    label: const Text('Accept terms and conditions'),
    description: const Text('You agree to our terms and conditions.'),
    semanticsLabel: 'Accept terms and conditions',
    value: _state,
    onChange: (value) => setState(() => _state = value),
    enabled: false,
  );
}

Error

class Page extends StatefulWidget {
  @override
  State<Page> createState() => PageState();
}

class PageState extends State<Page> {
  bool _state = false;

  @override
  Widget build(BuildContext context) => FCheckbox(
    label: const Text('Accept terms and conditions'),
    description: const Text('You agree to our terms and conditions.'),
    error: const Text('Please accept the terms and conditions.'),
    semanticsLabel: 'Accept terms and conditions',
    value: _state,
    onChange: (value) => setState(() => _state = value),
  );
}

Without Label

class Page extends StatefulWidget {
  @override
  State<Page> createState() => PageState();
}

class PageState extends State<Page> {
  bool _state = false;

  @override
  Widget build(BuildContext context) => FCheckbox(
    value: _state,
    onChange: (value) => setState(() => _state = value),
  );
}

Form

class RegisterForm extends StatefulWidget {
  @override
  State<RegisterForm> createState() => _RegisterFormState();
}

class _RegisterFormState extends State<RegisterForm> {
  final _key = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) => Form(
        key: _key,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            FTextFormField.email(
              hint: 'janedoe@foruslabs.com',
              validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
            ),
            const SizedBox(height: 12),
            FTextFormField.password(
              validator: (value) => 8 <= (value?.length ?? 0) ? null : 'Password must be at least 8 characters long.',
            ),
            const SizedBox(height: 15),
            FormField(
              initialValue: false,
              onSaved: (value) {
                // Save values somewhere.
              },
              validator: (value) => (value ?? false) ? null : 'Please accept the terms and conditions.',
              builder: (state) => FCheckbox(
                label: const Text('Accept terms and conditions'),
                description: const Text('You agree to our terms and conditions.'),
                error: state.errorText == null ? null : Text(state.errorText!),
                value: state.value ?? false,
                onChange: (value) => state.didChange(value),
              ),
            ),
            const SizedBox(height: 20),
            FButton(
              child: const Text('Register'),
              onPress: () {
                if (!_key.currentState!.validate()) {
                  // Handle errors here.
                  return;
                }

                _key.currentState!.save();
                // Do something.
              },
            ),
          ],
        ),
      );
}

On this page