Forms and controls

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

Overview

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

Installation

npx @mwillbanks/tuil add field text-input text-area number-input checkbox switch radio-group select multi-select autocomplete password-input search-input command-line code-editor inline-editor editable-table-cell editable-tree-node form-field-editor date-time-input

The CLI writes source-owned components beneath the destination configured in tuil.config.ts; the default import below assumes src/components/tuil.

Loading executable example…

Components and subcomponents

API	Signature	Description
`Form`	`function Form`	Public function Form.
`ValidationSummary`	`function ValidationSummary`	Public function ValidationSummary.
`Field`	`function Field`	Public function Field.
`FieldLabel`	`constant FieldLabel`	Public constant FieldLabel.
`FieldDescription`	`constant FieldDescription`	Public constant FieldDescription.
`FieldError`	`constant FieldError`	Public constant FieldError.
`FieldHint`	`constant FieldHint`	Public constant FieldHint.
`FieldGroup`	`constant FieldGroup`	Public constant FieldGroup.
`FieldSet`	`constant FieldSet`	Public constant FieldSet.
`TextInput`	`function TextInput`	Public function TextInput.
`TextArea`	`function TextArea`	Public function TextArea.
`NumberInput`	`function NumberInput`	Public function NumberInput.
`Checkbox`	`function Checkbox`	Public function Checkbox.
`Switch`	`function Switch`	Public function Switch.
`RadioGroup`	`function RadioGroup`	Public function RadioGroup.
`Select`	`function Select`	Public function Select.
`MultiSelect`	`function MultiSelect`	Public function MultiSelect.
`Autocomplete`	`function Autocomplete`	Public function Autocomplete.
`PasswordInput`	`function PasswordInput`	Public function PasswordInput.
`SearchInput`	`function SearchInput`	Public function SearchInput.
`CommandLine`	`function CommandLine`	Public function CommandLine.
`CodeEditor`	`function CodeEditor`	Public function CodeEditor.
`InlineEditor`	`constant InlineEditor`	Public constant InlineEditor.
`EditableTableCell`	`constant EditableTableCell`	Public constant EditableTableCell.
`EditableTreeNode`	`constant EditableTreeNode`	Public constant EditableTreeNode.
`FormFieldEditor`	`constant FormFieldEditor`	Public constant FormFieldEditor.
`DateTimeInput`	`function DateTimeInput`	Public function DateTimeInput.

Interaction

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

API and events

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

Every interactive component publishes semantic roles, labels, state, and focus identity through the renderer's SemanticRegistry. Callback failures flow to the owning application's error boundary.

Documentation flow diagram. props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3 — **Documentation flow diagram.** props and runtime state; semantic registration; focus and input routing; callback or state update; rerender; S0 leads to S1; S1 leads to S2; S2 leads to S3

Example

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

export function Example(props: ComponentProps<typeof Form>) {
  return <Form {...props} />;
}

Registry-installed components are source-owned: customize the generated file in your application, and use the package reference for the shared runtime contracts.