Input

A styled text input control. When you pass label, description, or error, Input delegates to Field for accessible labeling, descriptions, validation messaging, and field state attributes.

Source Code

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    label="Email"
    placeholder="you@example.com"
    type="email"
  />
));

Import

import { Input } from "areia";

Usage

With Built-in Field

Use the label prop to enable the Field wrapper with label, description, and error support.

We'll only use this for account notifications.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="email"
    label="Email"
    description="We'll only use this for account notifications."
    placeholder="you@example.com"
    type="email"
  />
));

Bare Input

For custom form layouts, use Input without label. Provide aria-label or aria-labelledby for accessibility. Use Input.Static(...) when composing a raw input inside Field manually.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    aria-label="Search"
    placeholder="Search..."
    type="search"
  />
));

Examples

With Label and Description

The label prop enables the Field wrapper with automatic vertical layout.

Project name

Use a short, memorable name.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="project-name"
    label="Project name"
    description="Use a short, memorable name."
    placeholder="My Ilha app"
  />
));

With Error

Pass error as a string for simple error messages. Error styling is automatically applied when the error prop is truthy.

Enter a valid email address.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="email-error"
    label="Email"
    placeholder="you@example.com"
    type="email"
    value="not-an-email"
    error="Enter a valid email address."
  />
));

With Validation Object

Pass error as an object with a message property when you want to keep validation metadata near the field.

Username

Username is required.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="username"
    label="Username"
    required
    placeholder="areia-user"
    error={{
      message: "Username is required.",
      match: "valueMissing",
    }}
  />
));

Input Sizes

Four sizes are available: xs, sm, base, and lg.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <div class="flex w-full max-w-sm flex-col gap-3">
    <Input
      size="xs"
      aria-label="Extra small input"
      placeholder="Extra small"
    />
    <Input
      size="sm"
      aria-label="Small input"
      placeholder="Small"
    />
    <Input
      size="base"
      aria-label="Base input"
      placeholder="Base"
    />
    <Input
      size="lg"
      aria-label="Large input"
      placeholder="Large"
    />
  </div>
));

Disabled

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input label="Email" placeholder="you@example.com" disabled />
));

Optional Field

Set required: false to show optional text after the label.

Website

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="website"
    label="Website"
    required={false}
    placeholder="https://example.com"
    type="url"
  />
));

Use labelTooltip to add additional context via a native title attribute on the label.

Team name

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="team-name"
    label="Team name"
    labelTooltip="This name is visible to everyone in your workspace."
    placeholder="Design systems"
  />
));

Rich Label

The label prop accepts Ilha markup for richer formatting.

Email for billing

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="billing-email"
    label={
      <>
        Email for <strong>billing</strong>
      </>
    }
    required
    placeholder="billing@example.com"
    type="email"
  />
));

Bare Input with Error

Error messages and descriptions can render without a visible label. Use aria-label to keep the input accessible.

Search by name or ID.

Search is currently unavailable.

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    id="search-error"
    aria-label="Search"
    placeholder="Search..."
    description="Search by name or ID."
    error="Search is currently unavailable."
  />
));

Input Types

Supports standard HTML input types such as text, email, password, number, tel, and url.

Password

Team size

Website

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <div class="flex w-full max-w-sm flex-col gap-3">
    <Input
      label="Email"
      type="email"
      placeholder="you@example.com"
    />
    <Input
      label="Password"
      type="password"
      placeholder="••••••••"
    />
    <Input label="Team size" type="number" placeholder="12" />
    <Input
      label="Website"
      type="url"
      placeholder="https://example.com"
    />
  </div>
));

Password Manager Overlays

Set passwordManagerIgnore on non-credential inputs that password managers might incorrectly classify as login fields.

Project slug

import ilha from "ilha";
import { Input } from "areia";

export default ilha.render(() => (
  <Input
    label="Project slug"
    placeholder="my-ilha-app"
    passwordManagerIgnore
  />
));

API Reference

Input accepts standard HTML input attributes plus the following props.

Prop	Type	Default	Description
`label`	`unknown`	-	Label content for the input. Enables the field wrapper.
`labelTooltip`	`string`	-	Tooltip text rendered as a native title on the label text.
`description`	`unknown`	-	Helper text displayed below the input.
`error`	`unknown \| { message: unknown; match?: unknown }`	-	Error message. When truthy, error styling is automatically applied.
`passwordManagerIgnore`	`boolean`	-	Suppress browser extension password manager overlays on non-credential inputs.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Input size.
`variant`	`"default" \| "error"`	`"default"`	Visual variant. Explicit `variant` takes precedence over automatic error styling.
`class`	`string`	-	Additional CSS classes applied to the input.
`className`	`string`	-	Alias for `class`.

Validation Error Types

When using error as an object, the match property can mirror HTML5 ValidityState keys.

Match	Description
`valueMissing`	Required field is empty.
`typeMismatch`	Value does not match the input type, such as an invalid email.
`patternMismatch`	Value does not match the `pattern` attribute.
`tooShort`	Value is shorter than `minLength`.
`tooLong`	Value is longer than `maxLength`.
`rangeUnderflow`	Value is less than `min`.
`rangeOverflow`	Value is greater than `max`.
`true`	Always show the error, useful for server-side validation.

Accessibility

Label Requirement

Inputs should have an accessible name via one of:

label prop
placeholder plus aria-label for bare inputs
aria-labelledby for custom label association

Error Association

When an id is provided, descriptions and error messages are automatically associated with the input using aria-describedby.