Bootstrap.Form

Bootstrap provides several form control styles, layout options, and custom components for creating a wide variety of forms.

Forms

form : List (Attribute msg) -> List (Html msg) -> Html msg

Create an Html form element

formInline : List (Attribute msg) -> List (Html msg) -> Html msg

Create an inline form for placing elements horizontally.

Note: You should stick to inline elements to get the effect you are probably expecting!

Groups

Use form groups to group items together (label + input is a typical simple example)

group : List (Option msg) -> List (Html msg) -> Html msg

Use the group function to create a grouping of related form elements. It just creates a div container with a form-group Bootstrap class. Typically you use this for vertically laid out forms.

options List of options for customizing the group
children List of children

label : List (Attribute msg) -> List (Html msg) -> Html msg

Create a form control label. Suitable for use in form groups.

attributes List of attributes
children List of child elements

Group validation

groupSuccess : Option msg

Option to signal success for a form group. Typically used for validation.

groupWarning : Option msg

Option to give a warning feedback for a form group. Typically used for validation.

groupDanger : Option msg

Option to give a danger/error feedback for a form group. Typically used for validation.

Grid layouts

row : List (Option msg) -> List (Col msg) -> Html msg

Create a form group row element. Use this function when creating horizontal forms (in various shapes) It reuses the options from Bootstrap.Grid.Row which gives you a ton of customization options for how to layout columns within this row.

options List of Bootstrap.Grid.Row options
cols List of column elements (see col or colLabel)

col : List (Option msg) -> List (Html msg) -> Col msg

Create a Grid column for use in form rows. It reuses the options from Bootstrap.Grid.Col which gives you a ton of customization options for layout.

options List of Bootstrap.Grid.Col options
children List of child elements

colLabel : List (Option msg) -> List (Html msg) -> Col msg

Create a label element as a grid column to be used in a form row. Handy for use in horizontal form in various shapes.

options List of Bootstrap.Grid.Col options for layout customization
children List of child elements

colLabelSm : List (ColOption msg) -> List (Html msg) -> Col msg

Create a shorter (height) colLabel

colLabelLg : List (ColOption msg) -> List (Html msg) -> Col msg

Create a taller colLabel

type Col msg

Opaque type representing a column in a form row

Row validation

rowSuccess : Option msg

Option to give a success feedback for a form row. Typically used for validation.

rowWarning : Option msg

Option to give a warning feedback for a form row. Typically used for validation.

rowDanger : Option msg

Option to give a danger/error feedback for a form row. Typically used for validation.

Validation

validationText : List (Attribute msg) -> List (Html msg) -> Html msg

Function to create validation related feedback. When placed inside a form group or form row with validation options set, this element will receive the appropriate color.

Handy helpers

help : List (Attribute msg) -> List (Html msg) -> Html msg

Creates a block level text element, suitable for providing context related help text in form groups.

helpInline : List (Attribute msg) -> List (Html msg) -> Html msg

Creates an inline text element, suitable for providing context related help text for inputs.

rundis/elm-bootstrap/3.0.0