Skip to content

Field

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.

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 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. Use Field.Root when you need island props such as validate.

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

export default ilha.render(() => (
  <Field.Root
    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.Root>
));

Invalid State

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

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.

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)

PropTypeDefaultDescription
labelunknown—Label content.
descriptionunknown—Help text associated with the control.
errorunknown—Error text shown when the field is invalid.
childrenunknown—Field control and custom content.
namestringcontrol nameField name.
disabledbooleanfalseDisables the field.
invalidbooleanfalseForces invalid state.
validationMode"onBlur" | "onChange" | "onSubmit""onBlur"When validation runs.
validate(value, control) => string | string[] | null—Custom validator (Field.Root island).

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