tuil
ReferenceComponentsForms and controls

Form

Form component API, behavior, and executable example.

View rawEdit

Loading executable example…

API and events

Connect semantic terminal controls to typed form state, validation, descriptions, errors, hints, and submission.

export function Form({
  id: providedId,
  controller: providedController,
  onSubmit,
  submitCommand,
  validateCommand,
  children,
}: FormProps): ReactNode;

Props, functions, and events

MemberTypeRequiredDescriptionRelated types
idstring | undefinedNoThe id member uses the string | undefined contract.
controllerTerminalFormController | undefinedNoThe controller member uses the TerminalFormController | undefined contract.TerminalFormController
onSubmit((values: Readonly<Record<string, unknown>>, signal: AbortSignal) => unknown | Promise<unknown>) | undefinedNoThe onSubmit member uses the ((values: Readonly<Record<string, unknown>>, signal: AbortSignal) => unknown | Promise<unknown>) | undefined contract.
submitCommandstring | undefinedNoThe submitCommand member uses the string | undefined contract.
validateCommandstring | undefinedNoThe validateCommand member uses the string | undefined contract.
childrenReactNodeNoThe children member uses the ReactNode contract.

Controls expose onValueChange, onSubmit, focus, selection, and validation callbacks.

Callback props run after the documented input is accepted. Callbacks are not cancellable unless their return type or description states otherwise.

Interaction and capabilities

Text controls edit directly; choice controls use arrows and Space or Enter; Form coordinates validation and submission.

The published manifest records keyboard, focus, pointer, theme, terminal, semantic, event, and dependency requirements.

Complete import

import { Form } from "@/components/tuil/forms/controls";

On this page