aforemny/material-components-web-elm/3.0.1

NOTE: the latest version is 9.1.0

Material.Chip.Choice

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

import Material.Chip.Choice as ChoiceChip


type Msg
    = ChipClicked String


main =
    ChoiceChip.set []
        [ ChoiceChip.chip
            (ChoiceChip.config
                |> ChoiceChip.setSelected True
                |> ChoiceChip.setOnClick (ChipClicked "One")
            )
            "Chip One"
        , ChoiceChip.chip
            (ChoiceChip.config
                |> ChoiceChip.setOnClick (ChipClicked "Two")
            )
            "Chip Two"
        ]

Configuration

type Config msg

Configuration of a choice chip

Default configuration of a choice chip

Configuration Options

setOnClick : msg -> Config msg -> Config msg

Specify a message when the user clicks on a chip

setIcon : Maybe String -> Config msg -> Config msg

Specify whether the chip displays an icon

setSelected : Bool -> Config msg -> Config msg

Specify whether a chip is selected

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Choice Chips

set : List (Attribute msg) -> List (Chip msg) -> Html msg

Choice chip container

chip : Config msg -> String -> Chip msg

Choice chip view function

type Chip msg

Choice chip type