Library · Forms & CTAs

Input

Progressive-enhancement input field with built-in validation and accessibility, showing an inline error message when aria-invalid.

Figma: Primitives / Input ↗
Live preview — edit theme bottom-right 
---
import Input from "../components/primitives/forms/Input.astro";
---
<Input name="email" label="Email address" type="email" required data-validation="Please provide a valid email address" />
<Input name="username" label="Username" value="jsmith" disabled data-validation="This field is required" />

Props

NameTypeRequiredDescription
class string — Additional classes to apply to the input field container
id string — Unique identifier for the input field
name string Yes Name attribute for the input field (required for form submission)
label string Yes Label text for the input field
data-validation string Yes Error message to display when validation fails
type 'text' | 'email' | 'password' | 'tel' | 'url' — Input type (determines built-in validation rules) (default: "text")
required boolean — Whether the field is required (default: false)
data-validation-pattern string — Custom validation pattern (regex)
data-validation-fn string — Custom validation function name (must be available on window)
value string — Default value for the input field
disabled boolean — Whether the field is disabled (default: false)
readonly boolean — Whether the field is readonly (default: false)
autocomplete string — Autocomplete attribute value (default: "on")
[key: string] any — HTML attributes

Example with all props

<Input
  class="email-input"
  id="enquiry-email"
  name="email"
  label="Email address"
  type="email"
  required
  data-validation="Enter a valid email address"
  data-validation-pattern="^[^@]+@[^@]+\.[^@]+$"
  data-validation-fn="validateEmail"
  value="hello@example.com"
  disabled={false}
  readonly={false}
  autocomplete="email"
  placeholder="you@example.com"
/>