Skip to content

Form

A form builder for Ink 5 that composes text inputs, selects, checkboxes, and switches into a navigable form with validation.

Install

npm install @matthesketh/ink-form

Usage

import { Form } from '@matthesketh/ink-form';

const fields = [
  { name: 'username', label: 'Username', type: 'text' as const, required: true },
  { name: 'password', label: 'Password', type: 'password' as const },
  { name: 'role', label: 'Role', type: 'select' as const, options: [
    { label: 'Admin', value: 'admin' },
    { label: 'User', value: 'user' },
  ]},
  { name: 'active', label: 'Active', type: 'boolean' as const, defaultValue: true },
];

function App() {
  return (
    <Form
      fields={fields}
      onSubmit={(values) => console.log(values)}
      onCancel={() => process.exit()}
    />
  );
}

Props

Prop	Type	Default	Description
`fields`	`FormField[]`	required	Array of field definitions
`onSubmit`	`(values) => void`	required	Called with form values on submit
`onCancel`	`() => void`	-	Called when Escape is pressed
`submitLabel`	`string`	`'Submit'`	Label for the submit button

Field types

text - inline text input
password - masked input
select - dropdown selection from options
boolean - toggle switch

Arrow keys / Tab to move between fields
Enter to edit text fields or toggle booleans
Enter on select fields opens a dropdown
Enter on submit button submits the form
Escape to cancel

Licence

MIT