Form
A native form wrapper for submission, validity, and Base UI field errors.
Contract
| Concern | Contract |
|---|---|
| submission | native submit events and FormData, or parsed field values through onFormSubmit |
| validation | native validity plus external errors rendered by Base UI TRField.Error composition |
| reset | native type="reset" restores uncontrolled values; controlled values and application results must be reset in onReset |
| state | controls may be uncontrolled or application-controlled; applications own server errors and post-submit results |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/form.css';Scroll inside the code area to read long lines.
Imports
import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRInput } from '@tinyrack/ui/components/input';
import { TRButton } from '@tinyrack/ui/components/button';Scroll inside the code area to read long lines.
Playground
Usage
Native FormData and reset permalink
Submit reads the named input from FormData. Reset restores the initial uncontrolled value and clears the submitted result.
Examples
Required submission and recovery permalink
Submit empty to see the error, enter a rack name, then submit again to see success.
Server error and recovery permalink
Rack Alpha simulates a server rejection. Editing clears the field error; another submission succeeds, and native reset clears both value and result state.
Imperative validation and first-invalid focus permalink
Validate one named field or the whole form through `actionsRef`. Native submit focuses the first invalid TRField control; the typed `onFormSubmit` values remain string-safe.
API
TRForm forwards native form props, refs, events, className, style, and render; controls keep ownership of their own values. TRFormProps<Values> preserves the field-value generic through onFormSubmit(values, details), with TRFormSubmitEventDetails and TRFormSubmitEventReason available for typed event details. Use errors with field names for server responses, choose validationMode at TRForm or TRField scope, and use TRFormActions.validate(name?) for explicit validation without synthesizing a submit. Native reset only restores uncontrolled controls; reset controlled values in the application’s onReset handler.