Form

Installation

bunnpmpnpmyarn
$ pnpm dlx shadcn@latest add @termcn/ink/form
Copy

Usage

Copyimport { Form } from "@/components/ui/form";

Copy<Form
  initialValues={{ name: "", email: "" }}
  fields={[
    { name: "name", validate: (v) => (v ? null : "Name is required") },
    { name: "email", validate: (v) => (v ? null : "Email is required") },
  ]}
  onSubmit={(values) => console.log("Submitted:", values)}
>
  <Text>Name and email form (Ctrl+S to submit)</Text>
</Form>

API Reference

Form

Notes

Accessibility

termcn exposes the following behavior through Ink's terminal accessibility APIs. This is not a browser ARIA or general WCAG-conformance claim.

• Keyboard: Ctrl+S validates and submits the form; Escape cancels it. Invalid submission focuses the first invalid field.
• Focus and composition: Input is active only while the component's focus target is focused, enabled, active, and inside the topmost focus scope.
• Screen reader: Ink labels and semantic state expose the component without relying on visual styling alone.