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 UserBioInputConstruct 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
This constructor automates some aspects of error handling with numeric
input. It allows you to treat the numeric input/output as a Maybe Int value in
your Elm program's model, update, and view; conversion to and from a string is
built into the constructor.
Valid integer input 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).
The 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.
--- MODEL ---
type alias Model = { userName : String , userAge : Maybe Int }
--- UPDATE ---
type Msg = UserAgeInput (Maybe Int) | ...
update : Msg -> Model -> Model update msg model = case msg of UserAgeInput value -> { model | userAge = value }
...--- VIEW ---
{ id = 3 , placeholder = "35" , value = model.userAge , minMaxStep = (0, 117, 1) } |> Ui.Input.int UserAgeInput
HTML tag: <input type="number" />
ARIA role: spinbutton (default for number input)
Element class: .input
Bulma CSS reference: https://bulma.io/documentation/form/input/
Construct an input field to capture a Float
This constructor automates some aspects of error handling with numeric
input. It allows you to treat the numeric input/output as a Maybe Float value
in your Elm program's model, update, and view; conversion to and from a string
is built into the constructor.
Valid decimal input triggers a model update on an input event; invalid
decimal 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).
The 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.
--- 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 AdjustBrightness
HTML tag: <input type="number" />
ARIA role: spinbutton (default for number input)
Element class: .input
Bulma CSS reference: https://bulma.io/documentation/form/input/
Construct an input field to capture a custom value
This constructor automates some aspects of error handling with custom Elm
types. It allows you to treat the input/output value as a 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.
Valid input (where the encoder returns an 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).
--- MODEL ---
type alias Model = { backgroundColor : Maybe Color , ... }
--- UPDATE ---
type Msg = BackgroundColorInput (Maybe Color) | ...
update : Msg -> Model -> Model update msg model = case msg of BackgroundColorInput value -> { model | backgroundColor = value }
...--- VIEW ---
{ id = 5 , placeholder = "#FFFFFF" , value = model.backgroundColor , encoder = ColorMath.Hex.toColor , decoder = ColorMath.Hex.fromColor >> Ok } |> Ui.Input.custom BackgroundColorInput
HTML tag: <input type="text" />
ARIA role: textbox (default for text input)
Element class: .input
Bulma CSS reference: https://bulma.io/documentation/form/input/
Construct an HTML5 slider widget to capture an Int
Unlike numeric input fields, sliders must always have a value, so the
input/output type is an Int, not a Maybe Int.
The minMaxStep argument sets the HTML5 min, max, and step attributes,
which are used for native browser implementations of the slider widget.
--- 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
HTML tag: <input type="range" />
ARIA role: slider (default for range input)
Element class: .slider
Available modifiers: none
Bulma CSS reference: none (.slider is not a Bulma element class)
Construct an HTML5 slider widget to capture a Float
Unlike numeric input fields, sliders must always have a value, so the
input/output type is a Float, not a Maybe Float.
The minMaxStep argument sets the HTML5 min, max, and step attributes,
which are used for native browser implementations of the slider widget.
--- 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
HTML tag: <input type="range" />
ARIA role: slider (default for range input)
Element class: .slider
Available modifiers: none
Bulma CSS reference: none (.slider is not a Bulma element class)
Construct an HTML5 color picker widget to capture a hexadecimal color code
The input/output value of the color picker widget is a hexadecimal string representing an RGB color encoding. This constructor does not implement any error handling for hex codes.
--- MODEL ---
type alias model = { backgroundColor : String , ... }
--- UPDATE ---
type Msg = UpdateBackgroundColor String | ...
update : Msg -> Model -> Model update msg model = case msg of UpdateBackgroundColor value -> { model | backgroundColor = value }
...--- VIEW ---
{ id = 8 , value = model.backgroundColor } |> Ui.Input.colorPicker UpdateBackgroundColor
HTML tag: <input type="color" />
ARIA role: none
Element class: .color-picker
Available modifiers: none
Bulma CSS reference: none (.color-picker is not a Bulma element class)
Construct an input field to capture a
StringThe
idargument 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.The
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.The
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.--- MODEL ---
type alias Model = { userName : String , ... }
--- UPDATE ---
type Msg = UserNameInput String | ...
update : Msg -> Model -> Model update msg model = case msg of UserNameInput value -> { model | userName = value }
--- VIEW ---
{ id = 1 , placeholder = "first last" , value = model.userName } |> Ui.Input.string UserNameInput
HTML tag:
<input type="text" />ARIA role: textbox (default for text input)
Element class: .input
Available modifiers: color, size, style state, icons
Bulma CSS reference: https://bulma.io/documentation/form/input/