Form Atoms
From @stackmates/ui-forms
FormInput
Text input with label, validation, and error display. Wraps TanStack Field internally.
Props — Contribute this section
typescript
import { FormInput } from '@stackmates/ui-forms';Usage
Basic
tsx
<FormInput<FormData>
form={form}
name="email"
label="Email"
type="email"
placeholder="you@example.com"
/>Accessibility
- Label auto-linked via htmlFor
- Error messages use aria-describedby
FormSelect
Dropdown select with TanStack Form integration.
Props — Contribute this section
typescript
import { FormSelect } from '@stackmates/ui-forms';Usage
With options
tsx
<FormSelect<FormData>
form={form}
name="country"
label="Country"
options={[
{ value: 'us', label: 'United States' },
{ value: 'uk', label: 'United Kingdom' },
]}
/>Accessibility
- Uses native <select> semantics
- Keyboard navigable with arrow keys
Related:FormInput
FormTextarea
Multi-line text input with TanStack Form integration.
Props — Contribute this section
typescript
import { FormTextarea } from '@stackmates/ui-forms';Usage
Basic
tsx
<FormTextarea<FormData>
form={form}
name="bio"
label="Bio"
placeholder="Tell us about yourself..."
/>Accessibility notes — Contribute this section
Related:FormInput