Forms and validation

Forms library

/#/forms provides an overview and 13 focused sections: basic, select, checks, pickers, masks, advanced, range, validation, wizard, editors, uploads, layouts, and enhanced-select. The shared sidebar and route tabs use src/features/forms/sections.ts.

Examples live in src/features/forms/. They use local React state and shared theme tokens; no additional dependency is required. SearchSelect.tsx provides a controlled searchable single/multiple select with keyboard navigation, removable chips and disabled options. It accepts label, options, value, onChange, and optional multiple. It is a React alternative for the demonstrated Select2-style interactions, not a jQuery Select2 wrapper.

The wizard validates each step and retains entries when going back. Custom validation includes an error summary, field messages and focus management. Layout examples demonstrate vertical, horizontal, grid, floating-label and inline arrangements. The editors route reuses the existing Tiptap editor.

Picker popups for native date/time/color inputs follow the browser and OS; an inline calendar is also included. Input masks format digits only and do not establish whether a date or phone number is valid. Upload examples accept PNG/JPEG/WebP, PDF and text, with a 5 MB per-file and 10-file queue limit, duplicate checks and local image previews. Object URLs are released on removal/unmount.

All form submission and upload results are local demonstrations. Connect an application API for persistence, authentication and uploads; apply server validation independently. Legacy /inputs/:variant routes remain available.

Controlled searchable select

import { useState } from 'react';
import { SearchSelect } from '../features/forms/SearchSelect';
export default function TeamField() {
  const [value, setValue] = useState<string[]>([]);
  return <SearchSelect label="Team" multiple
    options={[{ value: 'design', label: 'Design' }, { value: 'engineering', label: 'Engineering' }]}
    value={value} onChange={setValue} />;
}

value is an array for both single and multiple modes. The component is not a jQuery Select2 wrapper.

Production form checklist

• Keep visible labels connected to fields.
• Validate the current wizard step and preserve earlier answers.
• Show both field messages and a useful error summary.
• Retain data after failed requests.
• Validate again on your server; masks only format input.
• For uploads, check content and size server-side and report progress.