Forms
Radio group
One choice from a related set.
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';<fieldset><legend>Delivery method</legend>
<label class="cave-control"><input type="radio" name="delivery" value="pickup" checked>Pickup</label>
<label class="cave-control"><input type="radio" name="delivery" value="delivery">Delivery</label>
</fieldset>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: RadioExample()))),
));
class RadioExample extends StatefulWidget {
const RadioExample({super.key});
@override
State<RadioExample> createState() => _RadioExampleState();
}
class _RadioExampleState extends State<RadioExample> {
String? delivery = 'pickup';
@override
Widget build(BuildContext context) => CaveRadioGroup<String>(value: delivery,
options: const {'pickup': 'Pickup', 'delivery': 'Delivery'},
onChanged: (value) => setState(() => delivery = value));
}
Guidance
Give radio inputs a shared name and a visible group label. Arrow keys move through the options. Keep the selected value in application state.