the-sett / the-sett-laf / TheSett.Textfield

For building text inputs.

Global Snippet to add to the stylesheet.

global : ResponsiveStyle -> List Css.Global.Snippet

The global style snippet for text fields.

Builders for building different kinds of textfields.

text : (TheSett.Component.Msg Msg -> msg) -> TheSett.Component.Index -> Model s -> ResponsiveDSL.SimpleElementBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield msg

Creates a plain text field.

password : (TheSett.Component.Msg Msg -> msg) -> TheSett.Component.Index -> Model s -> ResponsiveDSL.SimpleElementBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield msg

Creates a password text field.

Builders for configuring textfields.

labelText : String -> ResponsiveDSL.ByDeviceBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield

Sets the text for the label.

labelFloat : ResponsiveDSL.ByDeviceBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield

Makes the label float on focus or when the textfield contains some value.

error : String -> ResponsiveDSL.ByDeviceBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield

Sets the error text for the input.

value : String -> ResponsiveDSL.ByDeviceBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield

Sets the initial value for the input.

disabled : ResponsiveDSL.ByDeviceBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield

Makes the input disabled.

autocomplete : Basics.Bool -> ResponsiveDSL.ByDeviceBuilder { a | textfield : ResponsiveDSL.Compatible } Textfield

Sets autocomplete=off on the input.

TEA model for the textfield (internal use).


type alias Model s =
{ s | textfield : TheSett.Component.Indexed State }

Holds a mapping from ids to textfield state.


type Msg
    = Focus
    | Unfocus
    | Input String

The events that text fields produce and consume to maintain their internal state.

update : (TheSett.Component.Msg Msg -> msg) -> Msg -> TheSett.Component.Index -> Model s -> ( Maybe (Model s), Platform.Cmd.Cmd msg )

Deals with text field messages, by locating a text field by its id, or creating a new default state for that text field is one does not exist yet.

The internal message is then processed against that text fields state.