Every form across the app needs consistent error messages, labels, descriptions, size variants, dirty indicators, and disabled states—without redoing these affordances in every Input, Select, or Checkbox. Duplicating styling, a11y attributes, and state logic fragment the UX and break when a designer updates spacing or color.

Inputs is a coordinated family of form controls (Field, Input, Textarea, Select, Checkbox, CheckboxGroup, RadioGroup, Switch, Slider, MultiSwitch, DatePicker) built on a shared pattern. Every control is fully controlled via value + onChange or checked + onCheckedChange, accepts label, description, error, and required props, supports five size variants (xs through xl), and includes a dirty flag for unsaved-change UI. Stable id and data-react-fancy-* attributes on every control make them agent-bridgeable. The Field wrapper adds layout and error display around any input when needed.

Import from @particle-academy/react-fancy: import { Input, Select, Checkbox, Field } from "@particle-academy/react-fancy". Render a controlled text input: <Input label="Email" type="email" value={email} onChange={setEmail} error={errors.email} required />. For multi-select: <CheckboxGroup label="Topics" list={items} value={selected} onValueChange={setSelected} />. All controls render with stable data-react-fancy-* selectors, enabling agent tooling to locate and mutate fields by registry key.