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
• Configuration
  • Configuration Options
• Filter Chip Set

Resources

• Demo: Chips
• Material Design Guidelines: Chips
• MDC Web: Chips
• Sass Mixins (MDC Web)

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