In an Elm program, captured user input is handled by the program's update function. The constructors in this module automate part of the set-up for capturing input and, optionally, decoding string values into numeric or custom types. These functions also provide built-in web accessibility features and, for text and numeric fields, default styling via the .input Bulma element class.
Construct a multi-line input field to capture a longer string of text
{ id = 2
, placeholder = "Tell us about yourself."
, value = model.userBio
, rows = Just 10
}
|> Ui.Input.textArea UpdateUserBioConstruct a label for an input field by giving the label text and the id number of the input element to which it applies
"Enter your name"
|> Ui.Input.labelFor 1Construct an input field to capture an Int
Maybe Int value in
your Elm program's model, update, and view; conversion to and from a string is
built into the constructor.Nothing on a change event (i.e., when the input element loses
focus).minMaxStep argument sets the HTML5 min, max, and step attributes,
which are used for native browser implementations of increment/decrement buttons
or a spinbox for selecting a value in the given range.Example:
--- MODEL ---
type alias Model =
{ userName : String
, userAge : Maybe Int
}
--- UPDATE ---
type Msg
= UpdateUserAge (Maybe Int)
| ...
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateUserAge value ->
{ model
| userAge = value
}
...
--- VIEW ---
{ id = 3
, placeholder = "35"
, value = model.userAge
, minMaxStep = (0, 117, 1)
}
|> Ui.Input.int UpdateUserAgeConstruct an input field to capture a Float
Maybe Float value
in your Elm program's model, update, and view; conversion to and from a string
is built into the constructor.Nothing on a change event (i.e., when the input element loses
focus).minMaxStep argument sets the HTML5 min, max, and step attributes,
which are used for native browser implementations of increment/decrement buttons
or a spinbox for selecting a value in the given range.Example:
--- MODEL ---
type alias Model =
{ brightness : Maybe Float
, ...
}
--- UPDATE ---
type Msg
= AdjustBrightness (Maybe Float)
| ...
update : Msg -> Model -> Model
update msg model =
case msg of
AdjustBrightness value ->
{ model
| brightness = value
}
...
--- VIEW ---
{ id = 4
, placeholder = ""
, value = model.brightness
, minMaxStep = (0, 1, 0.01)
}
|> Ui.Input.float AdjustBrightnessConstruct an input field to capture a custom value
Maybe whatever
in your Elm program's model, update, and view; conversion to and from a string
is built into the constructor using the encoder and decoder functions given as
arguments.Ok value) triggers a model update
on an input event; invalid integer input fails to update on input, but will
trigger an update of the value to Nothing on a change event (i.e., when the
input element loses focus).Example
--- MODEL ---
type alias Model =
{ backgroundColor : Maybe Color
, ...
}
--- UPDATE ---
type Msg
= UpdateBackgroundColor (Maybe Color)
| ...
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateBackgroundColor value ->
{ model
| backgroundColor = value
}
...
--- VIEW ---
{ id = 5
, placeholder = "#FFFFFF"
, value = model.backgroundColor
, encoder = ColorMath.Hex.toColor
, decoder = ColorMath.Hex.fromColor >> Ok
}
|> Ui.Input.custom UpdateBackgroundColorConstruct an HTML5 slider widget to capture an Int
Int, not a Maybe Int.minMaxStep argument sets the HTML5 min, max, and step attributes,
which are used for native browser implementations of the slider widget.Example:
--- MODEL ---
type alias Model =
{ starRating : Int
, ..
}
initial : Model
initial =
{ starRating = 3
, ..
}
--- UPDATE ---
type Msg
= UpdateStarRating Int
| ...
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateStarRating value ->
{ model
| starRating = value
}
...
--- VIEW ---
{ id = 6
, value = model.starRating
, minMaxStep = (1, 5, 1)
}
|> Ui.Input.intSlider UpdateStarRating<input type="range" />Construct an HTML5 slider widget to capture a Float
Float, not a Maybe Float.minMaxStep argument sets the HTML5 min, max, and step attributes,
which are used for native browser implementations of the slider widget.Example:
--- MODEL ---
type alias Model =
{ brightness : Float
, ..
}
initial : Model
initial =
{ brightness = 0.5
, ..
}
--- UPDATE ---
type Msg
= UpdateBrightness Int
| ...
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateBrightness value ->
{ model
| brightness = value
}
...
--- VIEW ---
{ id = 7
, value = model.brightness
, minMaxStep = (0, 1, 0.01)
}
|> Ui.Input.floatSlider UpdateBrightness<input type="range" />Construct an HTML5 color picker widget to capture a hexadecimal color code
Example:
--- MODEL ---
type alias model =
{ backgroundColor : String
, ...
}
--- UPDATE ---
type Msg
= UpdateTextColor String
| ...
update : Msg -> Model -> Model
update msg model =
case msg of
UpdateTextColor value ->
{ model
| textColor = value
}
...
--- VIEW ---
{ id = 8
, value = model.textColor
}
|> Ui.Input.colorPicker UpdateTextColor<input type="color" />
Construct an input field to capture a
Stringidargument is a unique integer used to generate an id attribute, which is required to implement some web accessibility features. If the integer is 3, the id attribute will be "input-3". Use thelabelForconstructor below to match a label to an input id.placeholderwill be displayed in the input field when its value attribute is empty. This may be used to suggest to the user the type of input requested, but for accessibilty reasons, it should not substitute for a label.valuesets the input element's value attribute. It should be a record field in your Elm program's model that gets updated whenever the user enters input. See the example below.Example:
<input type="text" />