Construct a checkbox that sends update messages like a button

To make the checkbox work as intended, the update function should handle the message by toggling a boolean value in the program's model (see example).

Example:

--- MODEL ---


type alias Model =
  { userAgrees : Bool
  , ...
  }


initial : Model
initial =
  { userAgrees = False
  , ...
  }


--- UPDATE ---


type Msg
  = ToggleUserAgrees
  | ...


update : Msg -> Model -> Model
update msg model =
  case msg of
    ToggleUserAgrees ->
      { model
      | userAgrees =
          model.userAgrees
            |> Basics.not
      }


    ...


--- VIEW ---


{ id = 9
, label = "I agree to the terms and conditions"
, checked = model.userAgrees
}
  |> Ui.Selector.checkbox ToggleUserAgrees

• HTML tag: <label> > <input type="checkbox" />
• ARIA role: checkbox (default)
• Element class: .checkbox
• Available modifiers: none
• Bulma CSS reference: https://bulma.io/documentation/form/checkbox/

Construct a set of radio buttons that send update messages like regular buttons, but include a value that identifies the user's selection

To make the radio buttons work as intended, the update function should handle the message by updating a record field in the program's model to the user's selection (see example).

Example:

--- MODEL ---


type EmailFrequency
  = Daily
  | Weekly
  | Monthly


type alias Model =
  { emailFrequency : EmailFrequency
  , ...
  }


--- UPDATE ---


type Msg
  = UpdateEmailFrequency EmailFrequency
  | ...


update : Msg -> Model -> Model
update msg model =
  case msg of
    UpdateEmailFrequency option ->
      { model
      | emailFrequency = option
      }


    ...


--- VIEW ---


{ id = 10
, options =
  [ ("Every day", Daily)
  , ("Every week", Weekly)
  , ("Every month", Monthly)
  ]


, selected = model.emailFrequency
}
  |> Ui.Selector.radioButtons UpdateEmailFrequency

• HTML tag: List of label > <input type="radio" />
• ARIA role: radio (default)
• Element class: .radio
• Available modifiers: none
• Bulma CSS reference: https://bulma.io/documentation/form/radio/

Construct a dropdown selector where selecting an option sends an update message like a button, but also includes a value that identifies the user's selection

To make the dropdown selector work as intended, the update function should handle the message by updating a record field in the program's model to the user's selection (see example).

Example:

--- MODEL ---


type ShippingDestination
  = UnitedStates
  | Canada
  | Global


type alias Model =
  { shippingDestination : Maybe ShippingDestination
  , ...
  }


initial : Model
initial =
  { shippingDestination = Nothing
  , ...
  }


--- UPDATE ---


type Msg
  = UpdateShippingDestination (Maybe ShippingDestination)
  | ...


update : Msg -> Model -> Model
update msg model =
  case msg of
    UpdateShippingDestination value ->
      { model
      | shippingDestination = value
      }


    ...


--- VIEW ---


{ id = 11
, placeholder = "Select shipping destination"
, options =
  [ ("United States", UnitedStates)
  , ("Canada", Canada)
  , ("Global", Global)
  ]


, selected = model.shippingDestination
}
  |> Ui.Selector.dropdown UpdateShippingDestination

• HTML tag: <select>
• ARIA role: combobox (default)
• Element class: .select
• Available modifiers: color, style, size, state, icons
• Bulma CSS reference: https://bulma.io/documentation/form/select/