Input

A labelled text input. .fnc runs on change with the new value.

Also written TextField; layr format rewrites these to Input.

#A labelled field

Input is a text field with its label (always present for screen readers). .fnc { … } runs on every change with the new value; store it in state and show it anywhere. kind picks the keyboard and validation (email, password, number, search, tel, url), and multiline: true makes a text area.

Page(
  .name(Signup)
  .route('/')
  var txt name = ''
  Scaffold(
    .config(color: canvas)
    .body(
      Column(
        .config(w: 320, gap: 12, padding: all(24))
        Input(
          .preset(default)
          .config(label: 'Your name', placeholder: 'Ada', value: name)
          .fnc { name = value }
        )
        Text(
          .config(color: muted)
          .obj(name == '' ? 'Type your name above.' : 'Hello, $name.')
        )
      )
    )
  )
)

#Config keys

Group .border(align, color, width, style, sides): Border settings grouped: .border(align: in, color: #0d0d0d, width: 2).

#Events

.fnc runs on change. .on(...) accepts tap, press, hover, hoverEnd, focus, blur, key, drag, swipe, mount, unmount, visible, submit.