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

Table of Contents

• Resources
• Basic Usage
• Choice Chips
• Filter Chips
• Input Chips

Resources

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

Basic Usage

import Material.Chips
    exposing
        ( choiceChip
        , choiceChipConfig
        , choiceChipSet
        )


type Msg
    = ChipSelected String


main =
    [ choiceChipSet []
        [ choiceChip
            { choiceChipConfig
                | selected = True
                , onClick = Just (ChipSelected "One")
            }
            "Chip One"
        , choiceChip
            { choiceChipConfig
                | onClick = Just (ChipSelected "Two")
            }
            "Chip Two"
        ]
    ]

Choice Chips

Choice chips are a variant of chips which allow single selection from a set of options.

choiceChipSet []
    [ choiceChip
        { choiceChipConfig
            | selected = True
            , onClick = Just (ChipSelected "One")
        }
        "Chip One"
    , choiceChip
        { choiceChipConfig
            | onClick = Just (ChipSelected "Two")
        }
        "Chip Two"
    ]

Filter Chips

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.

filterChipSet []
    [ filterChip
        { filterChipConfig
            | selected = True
            , onClick = Just (ChipSelected "Chip One")
        }
        "Tops"
    , filterChip
        { filterChipConfig
            | onClick = Just (ChipSelected "Chip Two")
        }
        "Shoes"
    ]

Input Chips

Input chips are a variant of chips which enable user input by converting text into chips.

inputChipSet []
    [ inputChip inputChipConfig "Chip One"
    , inputChip inputChipConfig "Chip Two"
    ]