Deepyr Documentation

Filter using HTML form

A `<form>` that includes radio buttons and an automatically generated reset button at the start.

Preview

Dart

// The Filter component manages the structure. State is controlled by the parent.
Filter<String>(
  name: 'state-management',
  groupValue: _selected, // State variable
  onValueChanged: (val) => setState(() => _selected = val),
  onReset: () => setState(() => _selected = null),
  // Defaults to FilterMethod.form
  children: [
    const FilterItem(value: 'Riverpod', label: 'Riverpod'),
    const FilterItem(value: 'Bloc', label: 'Bloc'),
    const FilterItem(value: 'Signals', label: 'Signals'),
  ],
)

Filter without HTML form

Use this if you can't use a `<form>`. The item with `isResetItem: true` acts as the reset/default option.

Preview

Dart

Filter<String>(
  name: 'state-management',
  groupValue: _selected,
  onValueChanged: (val) => setState(() => _selected = val),
  method: FilterMethod.div, // Renders a <div> container
  children: [
    // Designated reset item
    FilterItem(value: 'All', label: 'All', isResetItem: true),
    FilterItem(value: 'Riverpod', label: 'Riverpod'),
    FilterItem(value: 'Bloc', label: 'Bloc'),
    FilterItem(value: 'Signals', label: 'Signals'),
  ],
)

Filter using checkboxes

For multiple choices, use standard checkboxes styled with the `btn` class. This pattern doesn't use the `Filter` component wrapper.

Preview

Dart

// For multi-select filters, compose standard form elements.
form([
  input(
    classes: 'btn',
    type: InputType.checkbox,
    attributes: {'aria-label': 'Svelte'},
    // ... bind checked state ...
  ),
  input(classes: 'btn', type: InputType.checkbox, attributes: {'aria-label': 'Vue'}),
  input(classes: 'btn', type: InputType.checkbox, attributes: {'aria-label': 'React'}),

  // Reset button
  input(classes: 'btn btn-square', type: InputType.reset, value: '×'),
])