Filterable Content

List with text input.

Fruit is utterly invaluable for a mind-boggling variety of use cases.

  • Apples

    • Compare unalike entities.
    • Make crunchy noises.

  • Pears

    • Attract partridges.
    • Make crunchy noises.

  • Oranges

    • Compare unalike entities.
    • Make squishy noises.

Selecting the first option in this type of dropdown menu always resets the results to their original, unfiltered state.

Demo

Fruit is utterly invaluable for a mind-boggling variety of use cases.

FruitFruitful endeavours
Apples
  • Compare unalike entities.
  • Make crunchy noises.
Pears
  • Attract partridges.
  • Make crunchy noises.
Oranges
  • Compare unalike entities.
  • Make squishy noises.

Checkboxes

Toggle all checkboxes

<input type="checkbox" id="checkbox-toggle-all" class="toggle-all"><label for="checkbox-toggle-all">All</label>

Demo

Fruit is utterly invaluable for a mind-boggling variety of use cases.

  • Apples

    • Compare unalike entities.
    • Make crunchy noises.

  • Pears

    • Attract partridges.
    • Make crunchy noises.

  • Oranges

    • Compare unalike entities.
    • Make squishy noises.

  • Mystery fruit

    • Can't recall the name.
    • But it's small and fuzzy.