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 = []
}
{ 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
}
{ 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
}
{ 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
{ 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
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.
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"
]
]
}
{ with : SelectWith option msg
, max : Basics.Int
, menu : Menu option style variation msg
, label : Label style variation msg
, options : List (Option style variation 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.
updateSelection : SelectMsg option -> SelectWith option msg -> SelectWith option msg
clear : SelectWith option msg -> SelectWith option msg
Clear a selection.
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
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.