aforemny / material-components-web-elm / Material.ChipSet.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
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


type Config a msg

Configuration of a choice chip set

config : { toLabel : a -> String } -> Config a msg

Default configuration of a choice chip set

Configuration Options

setSelected : Maybe a -> Config a msg -> Config a msg

Specify which chip is selected

setOnChange : (a -> msg) -> Config a msg -> Config a msg

Specify a message when the user clicks on a chip

setAttributes : List (Html.Attribute msg) -> Config a msg -> Config a msg

Specify additional attributes

Choice Chip Set

chipSet : Config a msg -> Material.Chip.Choice.Internal.Chip a msg -> List (Material.Chip.Choice.Internal.Chip a msg) -> Html msg

Choice chip set view function