Field

Groups a label, form control, description, and validation message.

Groups a label, form control, description, and validation message. Field wires accessible relationships and tracks focused, filled, dirty, touched, valid, and invalid states.

Source Code

Use your work email.

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

export default ilha.render(() => (
  <Field label="Email" description="Use your work email.">
    <Input
      data-slot="field-control"
      type="email"
      name="email"
      placeholder="you@example.com"
    />
  </Field>
));

Import

import { Field } from "areia";

Usage

Render a control with data-slot="field-control" inside Field. The controller associates Field.Label, Field.Description, and Field.Error with the control.

Username

This will be visible on your profile.

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

export default ilha.render(() => (
  <Field
    label="Username"
    description="This will be visible on your profile."
  >
    <Input
      data-slot="field-control"
      name="username"
      placeholder="ryuz"
    />
  </Field>
));

Examples

Required Field

Native constraint validation is read from the field control.

Project name

Project name is required.

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

export default ilha.render(() => (
  <Field label="Project name" error="Project name is required.">
    <Input
      data-slot="field-control"
      name="project"
      required
      placeholder="My app"
    />
  </Field>
));

Custom Validation

Return a string from validate to mark the field invalid. Field is an Ilha island by default; use Field.Static for dead HTML without a controller.

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

export default ilha.render(() => (
  <Field
    label="Email"
    error="Enter a valid email address."
    validationMode="onBlur"
    validate={(value) =>
      value.includes("@")
        ? null
        : "Enter a valid email address."
    }
  >
    <Input
      data-slot="field-control"
      type="email"
      name="email"
      placeholder="<you@example.com>"
    />
  </Field>
));

Invalid State

Use invalid when validity is controlled by server state or another external source.

Workspace slug

This slug is already taken.

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

export default ilha.render(() => (
  <Field
    label="Workspace slug"
    invalid
    error="This slug is already taken."
  >
    <Input
      data-slot="field-control"
      name="slug"
      value="areia"
    />
  </Field>
));

Composed Parts

Use the part helpers when you need a custom layout.

Description

Keep it concise.

Description is required.

import { ilha } from "ilha";
import { Field, Textarea } from "areia";

export default ilha.render(() => (
  <Field>
    <Field.Label label="Description" />
    <Textarea
      data-slot="field-control"
      name="description"
      placeholder="Describe your project..."
    />
    <div class="flex items-center justify-between gap-3">
      <Field.Description description="Keep it concise." />
      <Field.Error error="Description is required." />
    </div>
  </Field>
));

API

`Field(input)`

Field is an Ilha island. Prefer Field.Static(...) for plain markup without a controller.

Prop	Type	Default	Description
`label`	`unknown`	—	Label content.
`description`	`unknown`	—	Help text associated with the control.
`error`	`unknown`	—	Error text shown when the field is invalid.
`children`	`unknown`	—	Field control and custom content.
`name`	`string`	control name	Field name.
`disabled`	`boolean`	`false`	Disables the field.
`invalid`	`boolean`	`false`	Forces invalid state.
`validationMode`	`"onBlur" \| "onChange" \| "onSubmit"`	`"onBlur"`	When validation runs.
`validate`	`(value, control) => string \| string[] \| null`	—	Custom validator (island mount).

Slots

Field uses these data slots:

field
field-label
field-control
field-description
field-error
field-validity
field-item

State attributes are applied to the root and parts:

data-disabled
data-focused
data-filled
data-dirty
data-touched
data-valid
data-invalid