altayaydemir / style-elements / Element.Input

Input Elements

checkbox : style -> List (Element.Attribute variation msg) -> Checkbox style variation msg -> Element style variation msg

Your basic checkbox

Input.checkbox Checkbox
    []
    { onChange = Check
    , checked = model.checkbox
    , label = el None [] (text "hello!")
    , options = []
    }


type alias Checkbox style variation msg =
{ onChange : Basics.Bool -> msg
, label : Element style variation msg
, checked : Basics.Bool
, options : List (Option style variation msg) 
}

styledCheckbox : style -> List (Element.Attribute variation msg) -> StyledCheckbox style variation msg -> Element style variation msg

A checkbox that allows you to style the actual checkbox:

Input.styledCheckbox Checkbox
    []
    { onChange = Check
    , checked = model.checkbox
    , label = el None [] (text "hello!")
    , options = []
    , icon =
        -- A function which receives a checked bool
        -- and returns the element that represents the checkbox
        \checked ->
            let
                checkboxStyle =
                    if checked then
                        CheckboxChecked
                    else
                        Checkbox
            in
            el checkboxStyle [] empty
    }


type alias StyledCheckbox style variation msg =
{ onChange : Basics.Bool -> msg
, label : Element style variation msg
, checked : Basics.Bool
, options : List (Option style variation msg)
, icon : Basics.Bool -> Element style variation msg 
}

Text Input


type alias Text style variation msg =
{ onChange : String -> msg
, value : String
, label : Label style variation msg
, options : List (Option style variation msg) 
}

text : style -> List (Element.Attribute variation msg) -> Text style variation msg -> Element style variation msg

A plain text input.

multiline : style -> List (Element.Attribute variation msg) -> Text style variation msg -> Element style variation msg

search : style -> List (Element.Attribute variation msg) -> Text style variation msg -> Element style variation msg

username : style -> List (Element.Attribute variation msg) -> Text style variation msg -> Element style variation msg

newPassword : style -> List (Element.Attribute variation msg) -> Text style variation msg -> Element style variation msg

A password input that allows the browser to autofill.

It's newPassword instead of just password because it gives the browser a hint on what type of password input it is.

currentPassword : style -> List (Element.Attribute variation msg) -> Text style variation msg -> Element style variation msg

'Choose One' Inputs


type alias Radio option style variation msg =
{ onChange : option -> msg
, choices : List (Choice option style variation msg)
, selected : Maybe option
, label : Label style variation msg
, options : List (Option style variation msg) 
}

radio : style -> List (Element.Attribute variation msg) -> Radio option style variation msg -> Element style variation msg

Input.radio Field
    [ padding 10
    , spacing 20
    ]
    { onChange = ChooseLunch
    , selected = Just model.lunch
    , label = Input.labelAbove (text "Lunch")
    , options = []
    , choices =
        [ Input.styledChoice Burrito <|
            \selected ->
                Element.row None
                    [ spacing 5 ]
                    [ el None [] <|
                        if selected then
                            text ":D"
                        else
                            text ":("
                    , text "burrito"
                    ]
        , Input.choice Taco (text "Taco!")
        , Input.choice Gyro (text "Gyro")
        ]
    }

radioRow : style -> List (Element.Attribute variation msg) -> Radio option style variation msg -> Element style variation msg

Same as radio, but arranges the choices in a row instead of a column


type Choice value style variation msg

Add choices to your radio and select menus.

choice : value -> Element style variation msg -> Choice value style variation msg

styledChoice : value -> (Basics.Bool -> Element style variation msg) -> Choice value style variation msg

styledSelectChoice : value -> (ChoiceState -> Element style variation msg) -> Choice value style variation msg

radioKey : String -> Option style variation msg

Add a key string to a radio option.

This is used to differentiate between separate radio menus.

It's not needed if the text of the labels are unique.


type ChoiceState
    = Idle
    | Focused
    | Selected
    | SelectedInBox

select : style -> List (Element.Attribute variation msg) -> Select option style variation msg -> Element style variation msg

This function needs to be paired with either Input.autocomplete or Input.dropMenu.

Input.select Field
    [ padding 10
    , spacing 20
    ]
    { label = Input.labelAbove <| text "Lunch"

    -- model.selection is some state(value, a Msg constructor, and the focus) we store in our model.
    -- It can be created using Input.autocomplete or Input.dropMenu
    -- Check out the Form.elm example to see a complete version.
    , with = model.selection
    , max = 5
    , options = []
    , menu =
        Input.menuAbove SubMenu
            []
            [ Input.choice Taco (text "Taco!")
            , Input.choice Gyro (text "Gyro")
            , Input.styledChoice Burrito <|
                \selected ->
                    Element.row None
                        [ spacing 5 ]
                        [ el None [] <|
                            if selected then
                                text ":D"
                            else
                                text ":("
                        , text "burrito"
                        ]
            ]
    }


type alias Select option style variation msg =
{ with : SelectWith option msg
, max : Basics.Int
, menu : Menu option style variation msg
, label : Label style variation msg
, options : List (Option style variation msg) 
}


type SelectWith option msg

autocomplete : Maybe option -> (SelectMsg option -> msg) -> SelectWith option msg

Create a select menu which shows options that are filtered by the text entered.

This is the part which goes in your model.

You'll need to update it using Input.updateSelection.

Once you have this in your model, you can extract the current selected value from it using Input.selected model.autocompleteState.

dropMenu : Maybe option -> (SelectMsg option -> msg) -> SelectWith option msg

Create a select menu which shows all options and allows the user to select one.

Use this if you only have 3-5 options. If you have a ton of options, use Input.autocomplete instead!

Once you have this in your model, you can extract the current selected value from it using Input.selected model.dropMenuState.

menu : style -> List (Element.Attribute variation msg) -> List (Choice option style variation msg) -> Menu option style variation msg

Create a dropdown menu.

This is used with Input.select

menuAbove : style -> List (Element.Attribute variation msg) -> List (Choice option style variation msg) -> Menu option style variation msg

A dropdown menu that goes up! A dropup!

selected : SelectWith option msg -> Maybe option

Get the selected value from an autocomplete or a dropMenu type that is used for your Input.select element.


type SelectMsg opt

updateSelection : SelectMsg option -> SelectWith option msg -> SelectWith option msg

clear : SelectWith option msg -> SelectWith option msg

Clear a selection.

Labels


type Label style variation msg

labelAbove : Element style variation msg -> Label style variation msg

labelBelow : Element style variation msg -> Label style variation msg

labelLeft : Element style variation msg -> Label style variation msg

labelRight : Element style variation msg -> Label style variation msg

placeholder : { text : String, label : Label style variation msg } -> Label style variation msg

hiddenLabel : String -> Label style variation msg

Options


type Option style variation msg


type Error style variation msg

errorAbove : Element style variation msg -> Option style variation msg

errorBelow : Element style variation msg -> Option style variation msg

disabled : Option style variation msg

Disable an input. This means that the input will not receive focus and can't be changed by the user.

Does not change the styling of the inputs unless they're controlled by the browser like a basic checkbox or standard radio button.

focusOnLoad : Option style variation msg

Put the focus on this input when the page loads.

Only one input should have this option turned on.

autofill : String -> Option style variation msg

Give a hint to the browser on what data can be used to autofill this input.

This can be very useful to allow the browser to autofill address and credit card forms.

For more general information check out the autocomplete attribute of input elements

autofillSection : String -> Option style variation msg

allowSpellcheck : Option style variation msg

Allow spellcheck for this input. Only works on text based inputs.