Forms
Checkbox
An independent yes-or-no choice.
This is a web visual reference. Native Flutter source is available below and tested in the package.
Code
Use native HTML and CSS; add JavaScript where interaction is needed.
import '@cave-ui/core/tokens.css';
import '@cave-ui/core/styles.css';<label class="cave-control"><input type="checkbox" name="copy">Email me a copy</label>A complete example for a Flutter project with the cave_ui package installed.
import 'package:flutter/material.dart';
import 'package:cave_ui/cave_ui.dart';
void main() => runApp(CaveApp(
controller: CaveController(locale: const Locale('en')),
home: const Scaffold(body: SafeArea(child: Padding(
padding: EdgeInsetsDirectional.all(24), child: CheckboxExample()))),
));
class CheckboxExample extends StatefulWidget {
const CheckboxExample({super.key});
@override
State<CheckboxExample> createState() => _CheckboxExampleState();
}
class _CheckboxExampleState extends State<CheckboxExample> {
bool checked = false;
@override
Widget build(BuildContext context) => CaveCheckbox(label: 'Email me a copy', value: checked,
onChanged: (value) => setState(() => checked = value ?? false));
}
Guidance
Use a native checkbox with a clickable label. Related choices belong in a fieldset with a legend. Disabled choices must explain why they are unavailable.