R10

Input Field: Text

The source code of this page is available at

Form_FieldType_Text.elm

Input field of type

Text

includes these sub-types:

◆ Plain

◆ Password New

◆ Password Current

◆ Email

◆ Username

◆ Multiline

◆ With Pattern

Here you can simulate all the possible states of the component

R10.Form.viewText

. You can click on all

yellow areas

below to change the state in real time. The messages on the right are all the messages that are fired by the component.

Note: Usually you don't need to call

R10.Form.viewText

directly because it is going to be called by

R10.Form.view

. Only call this view for advanced usage of this library. This page is meant to be used to visually see all possible states on the Text Input field

Helper text (

Markdown

)

Label

(Required)

Elm code

R10.Form.viewText :

List (Attribute msg)

-> List (Attribute msg)

-> R10.Form.ArgsText msg

-> Element msg

R10.Form.viewText [] []

-- Stuff that usually doesn't change

-- during the life of the component

{ label = "

, helperText =

Just

, requiredLabel =

Just

, textType =

R10.FormTypes.TextPasswordNew

, style =

R10.Form.style.outlined

, idDom = Nothing

, palette = palette

-- Stuff that usually change

-- during the life of the component

, value = "

, focused =

False

, valid =

Nothing

, disabled =

False

, showPassword =

False

, leadingIcon =

Nothing

, trailingIcon =

Nothing

-- Messages

, msgOnChange = msgOnChange

, msgOnFocus = msgOnFocus

, msgOnLoseFocus = msgOnLoseFocus

, msgOnTogglePasswordShow = msgOnTogglePasswordShow

, msgOnEnter = msgOnEnter

}

Messages

Form Example - Credit Card

Form Example - Phone Selector

Input Field: Text

English

⬤
⬤
⬤
⬤
⬤
⬤
⬤
⬤

⋮

Form Example - Credit Card

Form Example - Phone Selector

Input Field: Text

Language

English

Japanese (日本語)