Design System

Simple Form

Basic TanStack Form demonstration with ui-forms molecules.

Key Pattern: FormInput, FormSelect, FormTextarea molecules accept form and name props. They handle TanStack Field internally.

Copy This Pattern

import { useForm } from '@tanstack/react-form';
import { FormInput, FormSelect, FormTextarea } from '@stackmates/ui-forms';
import { Button } from '@stackmates/ui-interactive/atoms';

interface FormData {
  name: string;
  email: string;
  role: string;
  bio: string;
}

function MyForm() {
  const form = useForm<FormData>({
    defaultValues: { name: '', email: '', role: '', bio: '' },
    onSubmit: async ({ value }) => {
      // Handle submission
    },
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit(); }}>
      <FormInput<FormData>
        form={form}
        name="name"
        label="Name"
        required
      />
      <FormSelect<FormData>
        form={form}
        name="role"
        label="Role"
        options={[{ value: 'dev', label: 'Developer' }]}
      />
      <Button type="submit">Submit</Button>
    </form>
  );
}