Form Controls

Estimated reading: 5 minutes 24 views

This section documents Checkbox, Multi Checkbox, Radio Button, and Switch components available in FlutKit. These components are designed for dashboard-grade forms with consistent sizing, validation support, and flexible styling.

CustomCheckbox

A single checkbox component with label positioning, outlined style, validation, and color customization.

Constructor

Dart

CustomCheckbox({
  Key? key,
  String? label,
  required bool value,
  required void Function(bool?) onChanged,
  bool isLabelOnRight = true,
  bool isDisabled = false,
  bool isOutlined = false,
  Color? activeColor,
  double boxWidth = 18,
  IconData kIcon = Icons.check,
  String? Function(bool?)? validator,
  AutovalidateMode autovalidateMode = AutovalidateMode.disabled,
})

CustomCheckbox({
  Key? key,
  String? label,
  required bool value,
  required void Function(bool?) onChanged,
  bool isLabelOnRight = true,
  bool isDisabled = false,
  bool isOutlined = false,
  Color? activeColor,
  double boxWidth = 18,
  IconData kIcon = Icons.check,
  String? Function(bool?)? validator,
  AutovalidateMode autovalidateMode = AutovalidateMode.disabled,
})

Parameters

Parameter	Description
`label`	Optional text label displayed next to the checkbox.
`value`	Current checked state.
`onChanged`	Callback triggered when value changes.
`isLabelOnRight`	Controls label position relative to checkbox.
`isDisabled`	Disables interaction and visual feedback.
`isOutlined`	Renders checkbox with outlined style.
`activeColor`	Color applied when checkbox is checked.
`boxWidth`	Size of the checkbox square.
`kIcon`	Icon used when checkbox is checked.
`validator`	Optional validation logic for form usage.
`autovalidateMode`	Controls validation trigger behavior.

Use Cases

Accepting terms and conditions
Feature toggles inside forms
Settings panels

Examples

Dart

CustomCheckbox(
  label: 'Label on right',
  value: isChecked,
  onChanged: (newValue) {
    setState(() => isChecked = newValue!);
  },
)

CustomCheckbox(
  label: 'Label on right',
  value: isChecked,
  onChanged: (newValue) {
    setState(() => isChecked = newValue!);
  },
)

Dart

CustomCheckbox(
  label: 'Checkbox Outline Primary',
  value: isChecked,
  activeColor: kPrimaryColor,
  isOutlined: true,
  onChanged: (newValue) {
    setState(() => isChecked = newValue!);
  },
)

CustomCheckbox(
  label: 'Checkbox Outline Primary',
  value: isChecked,
  activeColor: kPrimaryColor,
  isOutlined: true,
  onChanged: (newValue) {
    setState(() => isChecked = newValue!);
  },
)

Best Practices

Use isOutlined for secondary or less-prominent actions
Always bind value to a state variable
Prefer CustomCheckbox over default Checkbox for consistent theming

Default Flutter Checkbox

FlutKit fully supports native Flutter widgets when needed.

Dart

Checkbox(
  value: isChecked,
  onChanged: (newValue) {
    setState(() => isChecked = newValue!);
  },
)

Checkbox(
  value: isChecked,
  onChanged: (newValue) {
    setState(() => isChecked = newValue!);
  },
)

MultiCheckboxWidget

A grouped checkbox component for selecting multiple values from a list.

Constructor

Dart

MultiCheckboxWidget({
  Key? key,
  required List<String> options,
  List<String> selectedOptions = const [],
  void Function(List<String>)? onChanged,
  Color? activeColor,
  bool isOutlined = false,
  bool isLabelOnRight = true,
  IconData? icon,
  double boxWidth = 18,
})

MultiCheckboxWidget({
  Key? key,
  required List<String> options,
  List<String> selectedOptions = const [],
  void Function(List<String>)? onChanged,
  Color? activeColor,
  bool isOutlined = false,
  bool isLabelOnRight = true,
  IconData? icon,
  double boxWidth = 18,
})

Parameters

Parameter	Description
`options`	List of available checkbox labels.
`selectedOptions`	Initial selected values.
`onChanged`	Callback returning updated selection list.
`activeColor`	Color applied to selected items.
`isOutlined`	Applies outlined style to all checkboxes.
`isLabelOnRight`	Label positioning.
`icon`	Custom icon for checked state.
`boxWidth`	Checkbox size.

Use Cases

Selecting skills or preferences
Permission or role selection
Filter panels

Example

Dart

MultiCheckboxWidget(
  options: ['Flutter', 'React', 'Swift'],
  selectedOptions: ['Flutter'],
  activeColor: kSuccessColor,
  onChanged: (selected) {},
)

MultiCheckboxWidget(
  options: ['Flutter', 'React', 'Swift'],
  selectedOptions: ['Flutter'],
  activeColor: kSuccessColor,
  onChanged: (selected) {},
)

Best Practices

Keep option labels short
Use grouping titles when options exceed 6 items

CustomRadioButton

A single radio-style toggle used in mutually exclusive selections.

Constructor

Dart

CustomRadioButton({
  Key? key,
  String? label,
  required bool value,
  required void Function(bool?) onChanged,
  bool isLabelOnRight = true,
  bool isDisabled = false,
  bool isOutlined = false,
  Color? activeColor,
  Color inactiveColor = Colors.transparent,
  double radioSize = 18.0,
})

CustomRadioButton({
  Key? key,
  String? label,
  required bool value,
  required void Function(bool?) onChanged,
  bool isLabelOnRight = true,
  bool isDisabled = false,
  bool isOutlined = false,
  Color? activeColor,
  Color inactiveColor = Colors.transparent,
  double radioSize = 18.0,
})

Parameters

Parameter	Description
`label`	Text label for the radio option.
`value`	Whether the radio is selected.
`onChanged`	Callback when selected.
`isLabelOnRight`	Label position control.
`isDisabled`	Disables interaction.
`isOutlined`	Outlined radio style.
`activeColor`	Color when selected.
`inactiveColor`	Color when not selected.
`radioSize`	Diameter of radio button.

Use Cases

Single-choice selection (plans, options)
Form wizard steps

Example

Dart

CustomRadioButton(
  label: 'Option 1',
  value: isSelected,
  onChanged: (newValue) {
    setState(() => isSelected = true);
  },
)

CustomRadioButton(
  label: 'Option 1',
  value: isSelected,
  onChanged: (newValue) {
    setState(() => isSelected = true);
  },
)

Best Practices

Always manage radio groups manually (mutual exclusivity)
Do not mix radio and checkbox in the same decision group

CustomSwitch

A toggle switch for binary on/off states.

Constructor

Dart

CustomSwitch({
  Key? key,
  String? label,
  required bool value,
  required void Function(bool) onChanged,
  bool isLabelOnRight = true,
  bool isDisabled = false,
  Color? activeColor,
  Color inactiveColor = Colors.grey,
  bool isOutlined = false,
  double switchWidth = 32.0,
  double switchHeight = 16.0,
  Duration? animationDuration,
})

CustomSwitch({
  Key? key,
  String? label,
  required bool value,
  required void Function(bool) onChanged,
  bool isLabelOnRight = true,
  bool isDisabled = false,
  Color? activeColor,
  Color inactiveColor = Colors.grey,
  bool isOutlined = false,
  double switchWidth = 32.0,
  double switchHeight = 16.0,
  Duration? animationDuration,
})

Parameters

Parameter	Description
`label`	Label text displayed beside switch.
`value`	Current switch state.
`onChanged`	Callback when toggled.
`isLabelOnRight`	Controls label position.
`isDisabled`	Disables the switch.
`activeColor`	Color when switch is ON.
`inactiveColor`	Color when switch is OFF.
`isOutlined`	Outline-style switch.
`switchWidth`	Width of switch track.
`switchHeight`	Height of switch track.
`animationDuration`	Optional animation timing.

Use Cases

Feature toggles
Enable/disable settings
Preference controls

Examples

Dart

CustomSwitch(
  label: 'Switch Primary',
  value: isOn,
  activeColor: kPrimaryColor,
  onChanged: (newValue) {
    setState(() => isOn = newValue);
  },
)

CustomSwitch(
  label: 'Switch Primary',
  value: isOn,
  activeColor: kPrimaryColor,
  onChanged: (newValue) {
    setState(() => isOn = newValue);
  },
)

Dart

CustomSwitch(
  label: 'Outline Switch',
  value: isOn,
  isOutlined: true,
  activeColor: kPrimaryColor,
  onChanged: (newValue) {
    setState(() => isOn = newValue);
  },
)

CustomSwitch(
  label: 'Outline Switch',
  value: isOn,
  isOutlined: true,
  activeColor: kPrimaryColor,
  onChanged: (newValue) {
    setState(() => isOn = newValue);
  },
)

Best Practices

Use switches only for immediate actions (not form submission)
Prefer checkbox for agreement-based inputs

Summary

Use Checkbox for agreement and multiple independent selections
Use MultiCheckbox for grouped multi-selection
Use Radio for mutually exclusive options
Use Switch for instant on/off behavior

All components follow FlutKit sizing, color, and theme standards to ensure visual consistency across dashboards.

Demo

To see this component in action, please refer to the demo available under Forms → Form Control