Form

import { Button } from 'topclassui/button'
import { Field } from 'topclassui/field'
import { Input } from 'topclassui/input'
import { Form } from 'topclassui/form'

/** The subscribe form of "Your first component": it posts to /subscribe with no script, and the browser asks for the email first. */
export default function Demo() {
  return (
    <Form action="/subscribe" method="post" className="flex max-w-sm flex-col gap-4">
      <Field name="email" label="Email" hint="We never share it" required>
        {(control) => <Input {...control} type="email" autoComplete="email" fullWidth />}
      </Field>
      <Button type="submit">Subscribe</Button>
    </Form>
  )
}

import { Button } from 'topclassui/button'
import { Field } from 'topclassui/field'
import { Input } from 'topclassui/input'
import { Textarea } from 'topclassui/textarea'
import { Form } from 'topclassui/form'

/** What an action answered, as a server page hands it back: each message keyed by name, and what was sent. */
const ANSWER = {
  errors: { email: 'This email is already subscribed', message: ['Write at least 20 characters', 'Leave out the links'] },
  values: { email: 'taken@example.com', message: 'Hi, see example.com' },
}

/** Server Fields given the errors an action returned: each lands on its own field, and the values come back as defaults. */
export default function Demo() {
  return (
    <Form action="/contact" method="post" className="flex max-w-sm flex-col gap-4">
      <Field name="email" label="Email" error={ANSWER.errors.email} required>
        {(control) => <Input {...control} type="email" autoComplete="email" defaultValue={ANSWER.values.email} fullWidth />}
      </Field>
      <Field name="message" label="Message" hint="What can we help with?" error={ANSWER.errors.message}>
        {(control) => <Textarea {...control} defaultValue={ANSWER.values.message} fullWidth />}
      </Field>
      <Button type="submit">Send</Button>
    </Form>
  )
}

'use client'

import { Button } from 'topclassui/button'
import { FieldLive } from 'topclassui/field'
import { Input } from 'topclassui/input'
import { FormAction, type FormActionState } from 'topclassui/form'

interface State extends FormActionState {
  values?: { name: string, email: string }
  message?: string
}

/** A text entry of the form, or '' for a missing one or a file. */
const text = (formData: FormData, name: string) => { const value = formData.get(name); return typeof value === 'string' ? value : '' }

/** Stands in for a Server Action: it answers a moment later, refuses taken@example.com and hands back what was sent. */
async function subscribe(_state: State, formData: FormData): Promise<State> {
  const values = { name: text(formData, 'name'), email: text(formData, 'email') }
  await new Promise((done) => { setTimeout(done, 200) })
  if (values.email === 'taken@example.com') return { errors: { email: 'This email is already subscribed' }, values }
  return { message: `Subscribed ${values.email}` }
}

/** FormAction in a client file: the error lands on its FieldLive, and the function child gives the fields back what was typed. */
export default function Demo() {
  return (
    <FormAction action={subscribe} className="flex max-w-sm flex-col gap-4">
      {(state, pending) => (
        <>
          <FieldLive name="name" label="Name">
            {(control) => <Input {...control} autoComplete="name" defaultValue={state.values?.name} fullWidth />}
          </FieldLive>
          <FieldLive name="email" label="Email" hint="Try taken@example.com" required>
            {(control) => <Input {...control} type="email" autoComplete="email" defaultValue={state.values?.email} fullWidth />}
          </FieldLive>
          <Button type="submit" loading={pending}>Subscribe</Button>
          <p role="status" className="text-sm text-body">{state.message}</p>
        </>
      )}
    </FormAction>
  )
}

import { Button } from 'topclassui/button'
import { Field } from 'topclassui/field'
import { Input } from 'topclassui/input'
import { TopClassProvider } from 'topclassui/provider'
import { Form } from 'topclassui/form'

/** Arabic, inside TopClassProvider as the root layout would mount it: the same subscribe form, read from the right. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar">
        <Form action="/subscribe" method="post" className="flex max-w-sm flex-col gap-4">
          <Field name="name" label="الاسم">
            {(control) => <Input {...control} autoComplete="name" fullWidth />}
          </Field>
          <Field name="email" label="البريد الإلكتروني" hint="لن نشاركه مع أحد" required>
            {(control) => <Input {...control} type="email" autoComplete="email" fullWidth />}
          </Field>
          <Button type="submit">اشترك</Button>
        </Form>
      </div>
    </TopClassProvider>
  )
}