Blocks

Input

A single-line text field. Thin wrapper around the HTML <input> element with consistent styling.

Usage

sui.input placeholder: "Type something…"

Disabled

sui.input placeholder: "Disabled", disabled: true

Types

sui.input type: "email", placeholder: "[email protected]"
sui.input type: "password", placeholder: "••••••••"
sui.input type: "number", placeholder: "42"

With label

tag.div(class: "space-y-2") do
  sui.label("Email", for_id: "email") +
  sui.input(type: "email", id: "email", placeholder: "[email protected]")
end

Full form field pattern

Username

Password

tag.div(class: "space-y-4 w-80") do
  tag.div(class: "space-y-2") do
    sui.label("Username", for_id: "username") +
    sui.input(id: "username", placeholder: "johndoe")
  end +
  tag.div(class: "space-y-2") do
    sui.label("Password", for_id: "password") +
    sui.input(type: "password", id: "password", placeholder: "••••••••")
  end +
  sui.button("Sign in", class: "w-full")
end

API

name	type	default	description
type	String	`"text"`	HTML input type. Any valid value: `email`, `password`, `number`, `file`, etc.
placeholder	String	`nil`	Placeholder text shown when the field is empty.
disabled	Boolean	`false`	Disables the field; applies muted styling via `disabled:opacity-50`.
id	String	`nil`	Sets the element id; used with `sui.label for_id:` to link label and input.
**opts	Hash	—	Any additional HTML attribute (`name`, `value`, `autofocus`, `data-*`, …).