shuip-forms

1---
2name: shuip-forms
3description: Use when building or editing a form in a project that uses shuip — covers shuip's react-hook-form (rhf-) and tanstack-form (tsf-) field components, their install commands, validation, submission, and accessible error/loading state. Use before hand-writing shadcn FormField boilerplate.
4---
5 
6# Building forms with shuip
7 
8## Overview
9 
10shuip ships pre-wired form **field components** for two libraries: **react-hook-form** (registry prefix `rhf-`) and **tanstack-form** (prefix `tsf-`). Each field collapses the label / control / error-message / accessibility wiring into one component.
11 
12**Core principle:** compose shuip field components — do NOT hand-write shadcn's `<FormField render={...}>` boilerplate. If you're reaching for `FormField`/`FormItem`/`FormControl`/`FormMessage`, you're rebuilding what these items already give you.
13 
14There is **no composite "form" item** in the registry — you assemble a form from individual field items plus your own schema and submit handler.
15 
16## Choose the library first
17 
18Match whatever the project already uses. If it's greenfield:
19 
20- **react-hook-form** (`rhf-*`) — mature ecosystem, uncontrolled/minimal re-renders, validates with a zod resolver. Fields bind through a typed **lens** (`@hookform/lenses`). Pick this unless you have a reason not to.
21- **tanstack-form** (`tsf-*`) — end-to-end type-safe field names, validators co-located on the field, good async validation. Natural fit if the project is already on the TanStack stack (Query/Router). Requires the `tsf-form-context` item as its foundation.
22 
23Do not mix the two families in one form.
24 
25## Install
26 
27```bash
28# react-hook-form fields (install the ones you need)
29npx shadcn@latest add "https://shuip.plvo.dev/r/rhf-input-field"
30npx shadcn@latest add "https://shuip.plvo.dev/r/rhf-password-field"
31npx shadcn@latest add "https://shuip.plvo.dev/r/submit-button"
32 
33# tanstack-form: install the form context FIRST, then fields
34npx shadcn@latest add "https://shuip.plvo.dev/r/tsf-form-context"
35npx shadcn@latest add "https://shuip.plvo.dev/r/tsf-input-field"
36npx shadcn@latest add "https://shuip.plvo.dev/r/tsf-submit-button"
37```
38 
39// … truncated