# Form

Source: /tuil/docs/reference/components/forms/form
Locale: en

Form component API, behavior, and executable example.





{/* Generated by tooling/docs/generate-reference.ts. */}

<PublishedStory storyId="component-acceptance" variant="Field" />

## API and events [#api-and-events]

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

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

### Props, functions, and events [#props-functions-and-events]

| Member            | Type                                                                                                             | Required | Description                                                                                                                                               | Related types                                                                          |
| ----------------- | ---------------------------------------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| `id`              | `string \| undefined`                                                                                            | No       | The `id` member uses the `string \| undefined` contract.                                                                                                  | —                                                                                      |
| `controller`      | `TerminalFormController \| undefined`                                                                            | No       | The `controller` member uses the `TerminalFormController \| undefined` contract.                                                                          | [`TerminalFormController`](/tuil/docs/reference/packages/form/api/terminal-form-controller) |
| `onSubmit`        | `((values: Readonly<Record<string, unknown>>, signal: AbortSignal) => unknown \| Promise<unknown>) \| undefined` | No       | The `onSubmit` member uses the `((values: Readonly<Record<string, unknown>>, signal: AbortSignal) => unknown \| Promise<unknown>) \| undefined` contract. | —                                                                                      |
| `submitCommand`   | `string \| undefined`                                                                                            | No       | The `submitCommand` member uses the `string \| undefined` contract.                                                                                       | —                                                                                      |
| `validateCommand` | `string \| undefined`                                                                                            | No       | The `validateCommand` member uses the `string \| undefined` contract.                                                                                     | —                                                                                      |
| `children`        | `ReactNode`                                                                                                      | No       | The `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 [#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 [#complete-import]

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