Input

A single-line text field with rounded styling and a visible focus ring. Use it for short free-form entries such as search terms, emails, or names. The value is two-way bindable and any native input attribute (name, disabled, required, autocomplete, min/max, etc.) is forwarded to the underlying <input> element.

Default

A field never names a colour: it wears bg-field surface-field and the surface underneath decides what that resolves to. Directly on the page it becomes the first surface; inside a Card, popover or dialog it becomes a hole cut into that surface. Never set a background on one from the call site.

Types

type is forwarded straight through, so the browser's own validation, keyboards and controls come with it. min, max, step and the rest reach the element via ...rest.

In a form field

Pair it with a Label whose for matches the input's id, so clicking the label focuses the field. Give a search input in a toolbar a fixed width (w-64) rather than w-full — inside a wrapping row, a full-width child pushes everything after it onto a second line.

API

Prop Type Default Description
value bindable string ''

Two-way bindable field value.

placeholder string ''

Placeholder text shown while the field is empty.

type 'text'|'email'|'password'|'number'|'search'|'tel'|'url'|'date' 'text'

Native input type applied to the underlying element.

class string

Extra Tailwind classes merged onto the input.

disabled boolean

Disables the field (forwarded via ...rest).