aforemny / material-components-web-elm / Material.ChipSet.Filter

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

Filter chips are a variant of chips which allow multiple selection from a set of options. When a filter chip is selected, a checkmark appears as the leading icon. If the chip already has a leading icon, the checkmark replaces it.

Table of Contents

Resources

Basic Usage

import Material.Chip.Filter as FilterChip
import Material.ChipSet.Filter as FilterChipSet

type Msg
    = ChipClicked String

main =
    FilterChipSet.chipSet []
        [ FilterChip.chip
            (FilterChip.config
                |> FilterChip.setSelected True
                |> FilterChip.setOnClick
                    (ChipClicked "Tops")
            )
            "Tops"
        , FilterChip.chip
            (FilterChip.config
                |> FilterChip.setOnClick
                    (ChipClicked "Shoes")
            )
            "Shoes"
        ]

Filter Chip Set

chipSet : List (Html.Attribute msg) -> Material.Chip.Filter.Internal.Chip msg -> List (Material.Chip.Filter.Internal.Chip msg) -> Html msg

Filter chip set view function