// The `indeterminate` state is a JavaScript property, not an HTML attribute.
// It requires a stateful component and a post-render callback to set it.
class IndeterminateSwap extends StatefulComponent {
@override
State<IndeterminateSwap> createState() => _IndeterminateSwapState();
}
class _IndeterminateSwapState extends State<IndeterminateSwap> {
final String _checkboxId = 'my-indeterminate-swap';
@override
void initState() {
super.initState();
if (kIsWeb) {
// Find the checkbox by ID after it renders and set the JS property.
Future.delayed(Duration.zero, () {
final element = document.getElementById(_checkboxId) as HTMLInputElement?;
element?.indeterminate = true;
});
}
}
@override
Component build(BuildContext context) {
// To apply the JS property, we manually construct the Swap's HTML.
// This gives us direct access to the <input> element's ID.
return label(
classes: 'swap',
[
input(
id: _checkboxId,
type: InputType.checkbox,
// Prevent clicks to keep it indeterminate for the demo.
events: {'click': [(e) => if (kIsWeb) e.preventDefault()]},
),
div(
classes: 'swap-on',
[Icon('check_circle', style: [TextUtil.xl2, TextUtil.success])],
),
div(
classes: 'swap-off',
[Icon('cancel', style: [TextUtil.xl2, TextUtil.error])],
),
div(
classes: 'swap-indeterminate',
[Icon('help', style: [TextUtil.xl2, TextUtil.warning])],
),
],
);
}
}
