Input

val valueVar = Var("Enter something...")
Input(
  _.value <-- valueVar,
  _.onInput.mapToValue --> valueVar
)()

val valueVar = Var("Enter something...")Input(  _.value <-- valueVar,  _.onInput.mapToValue --> valueVar)()

This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.

Examples

Labels

Use the label attribute to give the input an accessible label. For labels that contain HTML, use the label slot instead.

Input(
  _.label := "What is your name?"
)()

Input(  _.label := "What is your name?")()

Hint

Add descriptive hint to an input with the hint attribute. For hints that contain HTML, use the hint slot instead.

Input(
  _.label := "Nickname",
  _.hint  := "What would you like people to call you?"
)()

Input(  _.label := "Nickname",  _.hint  := "What would you like people to call you?")()

Placeholders

Use the placeholder attribute to add a placeholder.

Input(
  _.placeholder := "Type something"
)()

Input(  _.placeholder := "Type something")()

Clearable

Add the with-clear attribute to add a clear button when the input has content.

Input(
  _.placeholder := "Clearable",
  _.withClear   := true
)()

Input(  _.placeholder := "Clearable",  _.withClear   := true)()

Toggle Password

Add the password-toggle attribute to add a toggle button that will show the password when activated.

Input(
  _.typ            := "password",
  _.placeholder    := "Password Toggle",
  _.passwordToggle := true
)()

Input(  _.typ            := "password",  _.placeholder    := "Password Toggle",  _.passwordToggle := true)()

Appearance

Use the appearance attribute to change the input's visual appearance.

Input(
  _.placeholder := "Type something",
  _.appearance.filled
)()

Input(  _.placeholder := "Type something",  _.appearance.filled)()

Disabled

Use the disabled attribute to disable an input.

Input(
  _.placeholder := "Disabled"
)(
  disabled := true
)

Input(  _.placeholder := "Disabled")(  disabled := true)

Sizes

Use the size attribute to change an input's size.

Input(
  _.placeholder := "Small",
  _.size.small
)()
Input(
  _.placeholder := "Medium",
  _.size.medium
)()
Input(
  _.placeholder := "Large",
  _.size.large
)()

Input(  _.placeholder := "Small",  _.size.small)()Input(  _.placeholder := "Medium",  _.size.medium)()Input(  _.placeholder := "Large",  _.size.large)()

Pill

Use the pill attribute to give inputs rounded edges.

Input(
  _.placeholder := "Small",
  _.size.small,
  _.pill := true
)()
Input(
  _.placeholder := "Medium",
  _.size.medium,
  _.pill := true
)()
Input(
  _.placeholder := "Large",
  _.size.large,
  _.pill := true
)()

Input(  _.placeholder := "Small",  _.size.small,  _.pill := true)()Input(  _.placeholder := "Medium",  _.size.medium,  _.pill := true)()Input(  _.placeholder := "Large",  _.size.large,  _.pill := true)()

Input Types

The type attribute controls the type of input the browser renders.

Input(
  _.typ.email,
  _.placeholder := "Email"
)()
Input(
  _.typ.number,
  _.placeholder := "Number"
)()
Input(
  _.typ.date,
  _.placeholder := "Date"
)()

Input(  _.typ.email,  _.placeholder := "Email")()Input(  _.typ.number,  _.placeholder := "Number")()Input(  _.typ.date,  _.placeholder := "Date")()

Start & End Decorations

Use the start and end slots to add presentational elements like <wa-icon> within the input.

Input(
  _.placeholder := "Small",
  _.size.small,
  _.slots.start(Icon(_.name := "house")()),
  _.slots.end(Icon(_.name := "comment")())
)()
Input(
  _.placeholder := "Medium",
  _.size.medium,
  _.slots.start(Icon(_.name := "house")()),
  _.slots.end(Icon(_.name := "comment")())
)()
Input(
  _.placeholder := "Large",
  _.size.large,
  _.slots.start(Icon(_.name := "house")()),
  _.slots.end(Icon(_.name := "comment")())
)()

Input(  _.placeholder := "Small",  _.size.small,  _.slots.start(Icon(_.name := "house")()),  _.slots.end(Icon(_.name := "comment")()))()Input(  _.placeholder := "Medium",  _.size.medium,  _.slots.start(Icon(_.name := "house")()),  _.slots.end(Icon(_.name := "comment")()))()Input(  _.placeholder := "Large",  _.size.large,  _.slots.start(Icon(_.name := "house")()),  _.slots.end(Icon(_.name := "comment")()))()

Use CSS parts to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.

cls := "label-on-left",
Input(
  _.label := "Name",
  _.hint  := "Enter your name"
)(),
Input(
  _.label := "Email",
  _.typ.email,
  _.hint := "Enter your email"
)(),
Textarea(
  _.label := "Bio",
  _.hint  := "Tell us something about yourself"
)()

cls := "label-on-left",Input(  _.label := "Name",  _.hint  := "Enter your name")(),Input(  _.label := "Email",  _.typ.email,  _.hint := "Enter your email")(),Textarea(  _.label := "Bio",  _.hint  := "Tell us something about yourself")()