Forms
Switch
An immediately applied on-or-off setting.
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 class="cave-switch" type="checkbox" role="switch" name="notifications">Enable notifications</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: SwitchExample()))),
));
class SwitchExample extends StatefulWidget {
const SwitchExample({super.key});
@override
State<SwitchExample> createState() => _SwitchExampleState();
}
class _SwitchExampleState extends State<SwitchExample> {
bool enabled = false;
@override
Widget build(BuildContext context) => CaveSwitch(label: 'Enable notifications', value: enabled,
onChanged: (value) => setState(() => enabled = value));
}
Guidance
Use switches for settings that take effect immediately. Keep the label unchanged when toggled. Use role="switch" on a native checkbox and preserve its keyboard behaviour.