Checkbox
A control that allows the user to toggle between checked and not checked.
For touch devices, a switch is generally recommended over a checkbox.
We recommend using a select group to create a group of checkboxes.
class Page extends StatefulWidget {
const Page({super.key});
@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.'),
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) => setState(() => state = value),
);
}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.'),
semanticLabel: 'Accept terms and conditions',
value: true,
onChanged: (value) {},
enabled: true,
autofocus: true,
);Examples
Disabled
class Page extends StatefulWidget {
const Page({super.key});
@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.'),
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) => setState(() => state = value),
enabled: false,
);
}Error
class Page extends StatefulWidget {
const Page({super.key});
@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.'),
semanticLabel: 'Accept terms and conditions',
value: state,
onChange: (value) => setState(() => state = value),
);
}Without Label
class Page extends StatefulWidget {
const Page({super.key});
@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 {
const RegisterForm({super.key});
@override
State<RegisterForm> createState() => _RegisterFormState();
}
class _RegisterFormState extends State<RegisterForm> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) => Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
FTextField.email(
hint: 'janedoe@foruslabs.com',
validator: (value) => (value?.contains('@') ?? false) ? null : 'Please enter a valid email.',
),
const SizedBox(height: 12),
FTextField.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 ? Text(state.errorText!) : null,
value: state.value ?? false,
onChange: (value) => state.didChange(value),
),
),
const SizedBox(height: 20),
FButton(
label: const Text('Register'),
onPress: () {
if (!_formKey.currentState!.validate()) {
// Handle errors here.
return;
}
_formKey.currentState!.save();
// Do something.
},
),
],
),
);
}