Fields are containers for Controls. Usually this will be a single control, with optional an label and help.

import Bulma.Form exposing ( field
                           , label
                           , controlInput
                           , controlModifiers
                           , help
                           )


myField : Html msg
myField
  = field []
    [ controlLabel [] []
    , controlInput myControlInputModifiers [] [] [] 
    , controlHelp Default [] []
    ]

Controls are containers for singlular form controls. They can only contain the folling elements:

• label (for radio and checkbox)
• input
• select
• button
• icon

You really shouldn't need to use this function. controlLabel, controlButton, controlInput, etc. should be everything you need.

type Msg = UpdateName String


myInput : Html Msg
myInput
  = let myControlAttrs : List (Attribute Msg)
        myControlAttrs = []
        myInputAttrs   : List (Attribute Msg)
        myInputAttrs   = [ onInput UpdateName 
                         , placeholder "Name"
                         ]


    in  controlInput myControlInputModifiers 
        myControlAttrs
        myInputAttrs
        []

Just like controlInput, but with the type="text" attribute added to the input.

Just like controlInput, but with the type="password" attribute added to the input.

Just like controlInput, but with the type="email" attribute added to the input.

Just like controlInput, but with the type="tel" attribute added to the input.

type Msg = UpdateDesc String


myTextArea : Html Msg
myTextArea
  = let myControlAttrs  : List (Attribute Msg)
        myControlAttrs  = []
        myTextAreaAttrs : List (Attribute Msg)
        myTextAreaAttrs = [ onInput UpdateDesc
                          , placeholder "Description"
                          ]


    in  controlTextArea myControlTextAreaModifiers 
        myControlAttrs
        myTextAreaAttrs
        []

type Msg = UpdateChoice String


myOption : (String,String) -> Html msg
myOption (key,val)
  = option [ value val ]
    [ text key
    ]


mySelect : Html Msg
mySelect
  = let myControlAttrs  : List (Attribute Msg)
        myControlAttrs  = []
        mySelectAttrs : List (Attribute Msg)
        mySelectAttrs = [ onInput UpdateChoice ]


    in  controlSelect myControlModifiers 
        myControlAttrs
        mySelectAttrs
    <|  List.map myOption
    <|  [ (   "grow", "eat me"   )
        , ( "shrink", "drink me" )
        ]

A rounded variation of controlSelect.

Accepts options just like controlSelect, except it allows you to select multiple list items.

Secretly the same thing as a label. This is just for consistency's sake.

myLabel : Html msg
myLabel
  = controlLabel [] [ text "hello" ]

Just a simple label.

myLabel : Html msg
myLabel
  = label [] [ text "hi" ]

type Msg = UpdateChoice Bool


myCheckBox : Html Msg
myCheckBox
  = let myControlAttrs  : List (Attribute Msg)
        myControlAttrs  = []
        myLabelAttrs    : List (Attribute Msg)
        myLabelAttrs    = []
        myCheckBoxAttrs : List (Attribute Msg)
        myCheckBoxAttrs = [ onCheck UpdateChoice ]


    in  controlCheckBox False
        myControlAttrs
        myLabelAttrs
        myCheckBoxAttrs
        [ text "I don't agree to the terms and conditions"
        ]

type Msg = UpdateChoice String


myRadio : Html Msg
myRadio
  = let myControlAttrs : List (Attribute Msg)
        myControlAttrs = []
        myLabelAttrs   : List (Attribute Msg)
        myLabelAttrs   = []
        myRadioAttrs   : List (Attribute Msg)
        myRadioAttrs   = [ onInput UpdateChoice ]


    in  controlRadio myControlAttrs
        [ controlRadioButton False False "yes"
          myLabelAttrs
          (value "1" :: myRadioAttrs)
          [ text "yep" ]
        , controlRadioButton False True "no"
          myLabelAttrs
          (value "0" :: myRadioAttrs)
          [ text "nope" ]
        , controlRadioButton True False "maybe"
          myLabelAttrs
          (value "0" :: myRadioAttrs)
          [ text "uhh" ]
        ]

type Msg = DoSomething


myButton : Html Msg
myButton
  = let myControlAttrs : List (Attribute Msg)
        myControlAttrs = []
        myButtonAttrs   : List (Attribute Msg)
        myButtonAttrs   = [ onClick DoSomething ]


    in  controlButton myButtonModifiers 
        myControlAttrs
        myButtonAttrs
        [ text "Click me!"
        ]

Secretly just help. Created this just for consistency.

import B.Modifiers exposing (Color(Danger))


myHelp : Html msg
myHelp
  = help Danger []
    [ text "This field is required."
    ]

This is a container for gluing controls together on the same line. This variation will leave spaces between each control.

myFields : Html msg
myFields
  = fields Right []
    [ controlInput myControlInputModifiers [] [] [] 
    , control myControlModifiers []
      [ button myButtonModifiers [] []
      ]
    ]

This is a container for gluing controls together on the same line. This variation will connect them as "addons".

myFields : Html msg
myFields
  = connectedFields Centered []
    [ controlInput myControlInputModifiers [] [] [] 
    , control myControlModifiers []
      [ button myButtonModifiers [] []
      ]
    ]

This is a container for gluing controls together when you expect it to take up multiple lines.

myControlButton : String -> Html msg
myControlButton buttonText
  = control myControlModifiers []
    [ button myButtonModifiers []
      [ text buttonText ]
    ]


myFields : Html msg
myFields
  = multilineFields []
 <| List.map myControlButton
 <| List.map toString
 <| List.range 0 10

The horizontalFields expects a fieldLabel and a fieldBody.

import B.Modifiers exposing (Size(Standard))


myFields : Html msg
myFields
  = horizontalFields []
    [ fieldLabel Standard []
      [ label [] 
        [ text "name"
        ]
      ]
    , fieldBody []
      [ field []
        [ controlInput myControlInputModifiers [] [] [] 
        ]
      , field []
        [ controlInput myControlInputModifiers [] [] [] 
        ]
      ]
    ]

fieldLabel expects a Bulma label element.

import B.Modifiers exposing (Size(Large))
import B.Form exposing ( label
                           , fieldLabel
                           )


myFieldLabel : Html msg
myFieldLabel
  = fieldLabel Large []
    [ label [] 
      [ text "Email?"
      ]
    ]

myFieldBody : Html msg
myFieldBody
  = fieldBody []
    [ field []
      [ controlInput myControlInputModifiers [] [] [] 
      ]
    , field []
      [ controlInput myControlInputModifiers [] [] []
      ]
    ]