Skip to content

Module 6 — Forms and Inputs

6 lessons · Components · KanbanFlow
We build a set of reusable form primitives in Phlex — each sharing a common base class, with integrated labels, accessible error styling, and Lookbook previews. KanbanFlow gains working board creation, editing, and deletion.

Before we start

Forms in Phlex are built from the same primitives as everything else — typed props, view_template, Tailwind classes. There is no magic form DSL and no special base class required.

Our approach:

  • A FormField base class owns the props and rendering that every input shares — label, hint, error styling, required indicator
  • Each primitive inherits from FormField and only adds its own specific props and render_input implementation
  • Error styling is the primitive’s responsibility; error message display and summary strategy is the form’s responsibility
  • form_with handles CSRF, HTTP method, and URL — we don’t manage any of that manually

Note on Tailwind: This module uses raw Tailwind palette values (bg-blue-600, border-gray-300, text-gray-900 etc.) throughout. The semantic token system (bg-primary, border-border, text-text) is introduced in Module 7. All form components are restyled with tokens at that point — the structure and behaviour here are unchanged.

A deeper dive into form system design — choosing between inline errors vs summary errors, building multi-column layouts, date pickers, multi-select, and a simple_form-style abstraction — is covered in the companion project Designing a Form System in Phlex. The components built here cover KanbanFlow’s needs. The companion project goes further.