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

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

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• Choice Chip Set

Resources

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

Basic Usage

import Material.Chip.Choice as ChoiceChip
import Material.ChipSet.Choice as ChoiceChipSet


type Color
    = Red
    | Blue


type Msg
    = ColorChanged Color


main =
    ChoiceChipSet.chipSet
        (ChoiceChipSet.config
            { toLabel =
                \color ->
                    case color of
                        Red ->
                            "Red"


                        Blue ->
                            "Blue"
            }
            |> ChoiceChipSet.setSelected (Just Red)
            |> ChocieChipSet.setOnChange ColorChanged
        )
        [ ChoiceChip.chip ChoiceChip.config Red
        , ChoiceChip.chip ChoiceChip.config Blue
        ]

Configuration

Configuration Options

Choice Chip Set