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

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


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.Form
    exposing
        ( fieldLabel
        , label
        )
import B.Modifiers exposing (Size(Large))


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

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