R10

Form States

The source code of this page is available at

Form_States.elm

Form Components

Collection of Elements and Possible states

Text (filled)

Text (outlined)

Checkbox

Switch

Focused

Value

Validation

Disabled

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

Nothing

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

Nothing

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

Just True

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

Just True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

Just False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

Just False

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

False

Nothing

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

False

Nothing

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

False

Just True

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

False

Just True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

False

Just False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

True

False

Just False

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

True

Nothing

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

True

Nothing

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

True

Just True

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

True

Just True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

True

Just False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

True

Just False

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

Nothing

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

Nothing

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

Just True

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

Just True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

Just False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

Label

False

Just False

False

Text field - Component definition

FormComponents.Binary.view : List (Attribute msg) -> { label : String , value : String , focused : Bool , valid : Maybe Bool , displayValidation : Bool -- , msgOnChange : String -> msg , msgOnFocus : msg , msgOnLoseFocus : msg , msgOnTogglePasswordShow : msg -- , requiredLabel : Bool , helperText : Maybe String , textType : TextType , disabled : Bool } -> Element msg

Text field - Possible states

Text field Filled

Text field Outlined

Focused

Validation

Display Validation

Disabled

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Nothing

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Nothing

True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Nothing

False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Nothing

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just True

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just True

True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just True

False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just False

True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just False

False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

True

Just False

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Nothing

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Nothing

True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Nothing

False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Nothing

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just True

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just True

True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just True

False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just False

True

False

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just False

False

True

Helper Text

Label

(Required)

Helper Text

Label

(Required)

False

Just False

False

Checkbox - Component definition

FormComponents.Binary.view : List (Attribute msg) -> { label : String , value : Bool , focused : Bool , valid : Maybe Bool , displayValidation : Bool -- , msgOnChange : Bool -> msg , msgOnFocus : msg , msgOnLoseFocus : msg , msgOnClick : msg } -> Element msg

Checkbox - Possible states

Checkbox

Focused

Value

Validation

Disabled

Label

True

...

True

Label

True