MultiSelect

A keyboard-navigable list of checkable options.

See also: Select for a single choice.

Learn more: Forms & validation

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

MultiSelect<String>(
  options: options,
  values: _selected,
  onChanged: (values) => setState(() => _selected = values),
)

Details

Controlled: hold values yourself and update them from onChanged. Enter, Space, or a click toggles the highlighted option. Disabled options remain visible but cannot be toggled. Passing null for onChanged disables the whole widget.

Constructors

MultiSelect()

Parameter	Type	Default	Description
options:	List<SelectOption<T>>	required	Ordered choices; disabled options remain visible but cannot be toggled.
values:	Set<T>	required	Controlled set of currently selected option values.
onChanged:	void Function(Set<T> values)?	required	Called with a new unmodifiable selection after a toggle; null disables it.
semanticLabel:	String	'Multi-select'	Label exposed for the option list through the semantic app graph.
emptyLabel:	String	'No options'	Text rendered when options is empty.
focusNode:	FocusNode?	—	Optional externally owned focus node used for keyboard navigation.
autofocus:	bool	false	Whether the list requests focus when mounted.
style:	CellStyle?	—	Base styling for each option row, plus optional hover, focus, selected, disabled, and invalid state entries from CellStyle.interactive.

Source

MultiSelect is defined in packages/fleury/lib/src/catalog/select.dart.

Category: Inputs & controls · All widgets

Live demo

multiselect_example.dart

Restart Run Expand

Example · editable Revert Format

class _MultiSelectExampleState extends State<_MultiSelectExample> {
  Set<String> _selected = <String>{'logs'};

  @override
  Widget build(BuildContext context) => MultiSelect<String>(
    autofocus: true,
    semanticLabel: 'Enabled telemetry',
    options: const <SelectOption<String>>[
      SelectOption(value: 'logs', label: 'Logs'),
      SelectOption(value: 'traces', label: 'Traces'),
      SelectOption(value: 'metrics', label: 'Metrics'),
    ],
    values: _selected,
    onChanged: (values) => setState(() => _selected = values),
  );
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand