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)

  --- 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 for checkbox input)

• Element class: .checkbox

• Available modifiers: none

• Bulma CSS reference: https://bulma.io/documentation/form/checkbox/

--- 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 for radio input)
• Element class: .radio
• Available modifiers: none
• Bulma CSS reference: https://bulma.io/documentation/form/radio/

--- 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 for select input, not multiple)
• Element class: .select
• Available modifiers: color, style, size, state, icons
• Bulma CSS reference: https://bulma.io/documentation/form/select/