PF6.Select

PF6 Select component

Select components allow users to choose one or more values from a list.

See: https://www.patternfly.org/components/menus/select

Definition

type Select msg

Opaque Select type

type SelectOption msg

A selectable option

Constructor

select :

{ selected : Maybe String

, isOpen : Bool

, onToggle : Bool -> msg

, onSelect : String -> msg

, options : List (SelectOption msg)

}

-> Select msg

Construct a Select

select
    { selected = model.selectedColor
    , isOpen = model.selectOpen
    , onToggle = SelectToggled
    , onSelect = ColorSelected
    , options = [ option "red" "Red", option "blue" "Blue" ]
    }

Option constructors

option : String -> String -> SelectOption msg

Create a single option

optionGroup : String -> List (SelectOption msg) -> SelectOption msg

Create a group of options with a header label

Content modifiers

withPlaceholder : String -> Select msg -> Select msg

Set placeholder text (shown when nothing selected)

withLabel : String -> Select msg -> Select msg

Set a visible label above the select

withHelperText : String -> Select msg -> Select msg

Set helper text below the select

State modifiers

withDisabled : Select msg -> Select msg

Disable the select

withDanger : Select msg -> Select msg

Danger/error validation state

withSuccess : Select msg -> Select msg

Success validation state

withWarning : Select msg -> Select msg

Warning validation state

Rendering

toMarkup : Theme -> Select msg -> Element msg

Render the Select as an Element msg

lenards/elm-ui-patternfly/4.0.1