The indeterminate state can only be set using JavaScript after the element has rendered.
// The `indeterminate` property must be set on the DOM element after it renders.
// This requires a stateful component and a way to reference the element, like an ID.
class MyIndeterminateCheckbox extends StatefulComponent {
final String _checkboxId = 'my-unique-id';
@override
State<MyIndeterminateCheckbox> createState() => _MyIndeterminateCheckboxState();
}
class _MyIndeterminateCheckboxState extends State<MyIndeterminateCheckbox> {
@override
void initState() {
super.initState();
if (kIsWeb) {
// Set the property after the component has been added to the DOM.
Future.delayed(Duration.zero, () {
final element = document.getElementById(widget._checkboxId) as HTMLInputElement?;
if (element != null) {
element.indeterminate = true;
}
});
}
}
@override
Component build(BuildContext context) {
return Checkbox(id: widget._checkboxId);
}
}
Checkbox with custom colors
Use the `classes` property for custom Tailwind utilities.
