Inputs

Field

Shared label, description, error, id, and invalid-state wiring for form controls.

FieldView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

tsx

import { Cell } from "retend";

import { Field, Input } from "innate-ui";
import classes from "../docs.module.css";

export function FieldDemo() {
  const email = Cell.source("");
  const touched = Cell.source(false);
  const invalid = Cell.source(false);

  const updateValidity = (event: Event) => {
    invalid.set(!(event.currentTarget as HTMLInputElement).validity.valid);
  };
  const handleBlur = (event: FocusEvent) => {
    touched.set(true);
    updateValidity(event);
  };
  const handleInput = (event: Event) => {
    if (touched.get()) updateValidity(event);
  };

  return (
    <Field id="email-field" invalid={invalid} class={classes.validationDemo}>
      <Field.Label>Email</Field.Label>
      <Input
        type="email"
        value={email}
        onChange={(value) => email.set(value)}
        placeholder="name@example.com"
        required
        onInput={handleInput}
        onBlur={handleBlur}
      />
      <Field.ErrorMessage>Enter a valid email address.</Field.ErrorMessage>
    </Field>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

FieldProps

Prop	Type	Default
`id`required Stable id used to associate the field's label, control, description, and error.	`string`	`—`
`children`required Field label, control, description, and error parts.	`JSX.Children`	`—`
`invalid` Whether the field is invalid.	`JSX.ValueOrCell<boolean>`	`false`

Inspect the typed source →