FORM

Input

Inputs collect editable text with consistent labels, placeholders, icons, and visual variants on every target.

PLAYGROUND

Edit one shared value

The Select and Input bind to the same string Signal. Choose a preset, then continue editing it directly in the field.

Use at least three characters.
dowe
signal fieldValue value:""

Input bind:fieldValue label:"Workspace name" placeholder:"Enter a workspace name" labelFloating:true iconStart:"pen" helpText:"Use at least three characters." w:"full"
  validate rule:"required" message:"Workspace name is required."
  validate rule:"min:3" message:"Use at least three characters."

LABELS

Fixed or floating

A fixed label stays above the field. A floating label lives in the control surface and activates with focus or a value.

dowe
Input label:"Email" placeholder:"name@example.com"
Input label:"Email" placeholder:"name@example.com" labelFloating:true

VARIANTS

Four control surfaces

Variant changes the container treatment while keeping the same normalized field geometry.

SCHEMES

Every semantic family

Outlined fields use a neutral resting border and preserve the selected scheme for foreground and focus feedback.

SIZES

One scale on every target

Small, medium, and large controls are 32, 40, and 48 logical units, and their value text scales through body sm, md, and lg. A floating label adds 8 units without changing the selected size, including when the controls share a stretching Grid or Flex row on web.

ICONS

Context inside the field

Input resolves Solar icons at compile time. Floating-label fields hide them while empty and unfocused, then reveal them after focus or a value moves the label above the editable row. The active label begins after iconStart and its gap, aligned with the editable text.

VALIDATION

Validate after the first interaction

Direct validate children run in source order. The first failing message replaces helpText after blur, and later edits refresh it immediately.

dowe
Input bind:form.email label:"Email" helpText:"Use your work address."
  validate rule:"required" message:"Email is required."
  validate rule:"email" message:"Enter a valid email address."

BEHAVIOR

One native contract

Input uses native editable controls on web, iOS, and Android while Dowe keeps height, inset, typography, radius, binding, and focus color aligned.

On web, saved email and password values keep the field's inherited color and transparent background instead of activating browser autofill styling.

BINDING

Two-way text

bind reads and writes a string Signal path without executing user JavaScript.

ACCESSIBILITY

Label first

Placeholder copy never replaces the accessible label contract.

TARGETS

Portable metrics

Web, SwiftUI, and Compose consume the same normalized field model.

API

Props

Input also accepts the applicable common spacing, sizing, font, visibility, accessibility, and shadow props.

Prop
Type
Default

No data

There are no records to display