TextField

Single-line text input with label, hint, and error wiring handled for you. Every other text-like input in astro-ink builds on this pattern.

Basic with hint

We only use it for the receipt.

<TextField
  id="email"
  label="Email"
  type="email"
  hint="We only use it for the receipt."
  placeholder="you@example.com"
/>

Username

That username is taken.

<TextField id="username" label="Username" error="That username is taken." />

Small

Medium

Large

<TextField id="size-sm" label="Small" size="sm" />
<TextField id="size-lg" label="Large" size="lg" />

Plan

Reference

<TextField id="plan" label="Plan" value="Team" disabled />
<TextField id="ref" label="Reference" value="INK-0117" readonly />

Prop	Type	Default	Description
`id`	`string`	-	Required. Wires label and messages.
`label`	`string`	-	Visible label text.
`name`	`string`	`id`	Form field name.
`type`	`string`	`text`	Native input type.
`hint`	`string`	-	Help text below the input.
`error`	`string`	-	Error message; sets `aria-invalid`.
`required`	`boolean`	`false`	Marks and enforces required.
`disabled`	`boolean`	`false`	Non-interactive.
`readonly`	`boolean`	`false`	Read-only.
`size`	`sm \| md \| lg`	`md`	Control height and font size (TextField, NumberInput, PasswordInput, SearchInput, Textarea; Select uses `controlSize`).

:root {
  --ink-input-radius: 0.25rem;
  --ink-input-border: #d6cec3;
}