This is an alternative site for discovering Elm packages. You may be looking for the official Elm package site instead.
1.0.0

Bootstrap.Form

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

Forms

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

Create an Html form element

formInline : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.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.Html msg) -> Html.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 (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg

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

  • attributes List of attributes
  • children List of child elements
type Option msg = Attrs (List (Html.Attribute msg))

Opaque type representing options for customing form groups.

Grid layouts

row : List (Row.Option msg) -> List (Col msg) -> Html.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 (Col.Option msg) -> List (Html.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 (Col.Option msg) -> List (Html.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 (GridInternal.ColOption msg) -> List (Html.Html msg) -> Col msg

Create a shorter (height) colLabel

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

Create a taller colLabel

type Col msg = Col { elemFn : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg , options : List (Col.Option msg) , children : List (Html.Html msg) }

Opaque type representing a column in a form row

Validation

validFeedback : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg

Function to provide validation feedback information for valid inputs

invalidFeedback : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg

Function to provide validation feedback information for invalid inputs

Handy helpers

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

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

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

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

module Bootstrap.Form
    exposing
        ( form
        , formInline
        , group
        , label
        , row
        , col
        , colLabel
        , colLabelSm
        , colLabelLg
        , help
        , helpInline
        , validFeedback
        , invalidFeedback
        , Col
        , Option
        )

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


# Forms

@docs form, formInline


# Groups

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

@docs group, label, Option


# Grid layouts

@docs row, col, colLabel, colLabelSm, colLabelLg, Col


# Validation

@docs validFeedback, invalidFeedback


# Handy helpers

@docs help, helpInline

-}

import Html
import Html.Attributes as Attributes
import Bootstrap.Grid.Row as Row
import Bootstrap.Grid.Col as Col
import Bootstrap.Grid.Internal as GridInternal


{-| Opaque type representing a column in a form row
-}
type Col msg
    = Col
        { elemFn : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
        , options : List (Col.Option msg)
        , children : List (Html.Html msg)
        }

{-| Opaque type representing options for customing form groups.
-}
type Option msg
    = Attrs (List (Html.Attribute msg))


type alias Options msg =
    { attributes : List (Html.Attribute msg)
    }


{-| Create an Html form element
-}
form : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
form attributes children =
    Html.form
        attributes
        children


{-| Create an inline form for placing elements horizontally.

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

-}
formInline : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
formInline attributes =
    form (Attributes.class "form-inline" :: attributes)


{-| 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`](#Option) for customizing the group
  - `children` List of children

-}
group : List (Option msg) -> List (Html.Html msg) -> Html.Html msg
group options children =
    Html.div
        (toAttributes options)
        children


{-| Create a form control label. Suitable for use in form groups.

  - `attributes` List of attributes
  - `children` List of child elements

-}
label : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
label attributes children =
    Html.label
        (Attributes.class "form-control-label" :: attributes)
        children


{-| Creates a block level text element, suitable for providing context related help text in form groups.
-}
help : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
help attributes children =
    Html.small
        (Attributes.class "form-text text-muted" :: attributes)
        children


{-| Creates an inline text element, suitable for providing context related help text for inputs.
-}
helpInline : List (Html.Attribute msg) -> List (Html.Html msg) -> Html.Html msg
helpInline attributes children =
    Html.small
        (Attributes.class "text-muted" :: attributes)
        children


{-| Function to provide validation feedback information for valid inputs
-}
validFeedback :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Html.Html msg
validFeedback attributes children =
    Html.div
        (Attributes.class "valid-feedback" :: attributes)
        children


{-| Function to provide validation feedback information for invalid inputs
-}
invalidFeedback :
    List (Html.Attribute msg)
    -> List (Html.Html msg)
    -> Html.Html msg
invalidFeedback attributes children =
    Html.div
        (Attributes.class "invalid-feedback" :: attributes)
        children


toAttributes : List (Option msg) -> List (Html.Attribute msg)
toAttributes modifiers =
    let
        options =
            List.foldl applyModifier defaultOptions modifiers
    in
        [ Attributes.class "form-group" ]
            ++ options.attributes


defaultOptions : Options msg
defaultOptions =
    { attributes = []
    }


applyModifier : Option msg -> Options msg -> Options msg
applyModifier modifier options =
    case modifier of
        Attrs attrs ->
            { options | attributes = options.attributes ++ attrs }



{- Grid related functions -}


{-| 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`](#col) or [`colLabel`](#colLabel))

-}
row : List (Row.Option msg) -> List (Col msg) -> Html.Html msg
row options cols =
    Html.div
        (Attributes.class "form-group" :: GridInternal.rowAttributes options)
        (List.map renderCol cols)


{-| Create a Grid column for use in [`form rows`](#row). 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

-}
col : List (Col.Option msg) -> List (Html.Html msg) -> Col msg
col options children =
    Col
        { elemFn = Html.div
        , options = options
        , children = children
        }


{-| Create a label element as a grid column to be used in a [`form row`](#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

-}
colLabel : List (Col.Option msg) -> List (Html.Html msg) -> Col msg
colLabel options children =
    Col
        { elemFn = Html.label
        , options = Col.attrs [ Attributes.class "col-form-label" ] :: options
        , children = children
        }


{-| Create a shorter (height) [`colLabel`](#colLabel)
-}
colLabelSm :
    List (GridInternal.ColOption msg)
    -> List (Html.Html msg)
    -> Col msg
colLabelSm options =
    colLabel (Col.attrs [ Attributes.class "col-form-label-sm" ] :: options)


{-| Create a taller [`colLabel`](#colLabel)
-}
colLabelLg :
    List (GridInternal.ColOption msg)
    -> List (Html.Html msg)
    -> Col msg
colLabelLg options =
    colLabel (Col.attrs [ Attributes.class "col-form-label-lg" ] :: options)


renderCol : Col msg -> Html.Html msg
renderCol (Col { elemFn, options, children }) =
    elemFn
        (GridInternal.colAttributes options)
        children