Form

import {
  Form, FormSection, FormRow, FormField, FormLabel, FormControl, FormHint, FormFooter
} from "@/design-system/components/form";
import { Input } from "@/design-system/components/Input";
import { Button } from "@/design-system/components/Button";

export function Example() {
  return (
    <Form density="comfortable">
      <FormSection
        tone="primary"
        variant="surface"
        title="Student details"
        description="Core identity fields used across scheduling, notes, and exports."
        actions={<Button size="sm" variant="ghost">Auto-fill</Button>}
      >
        <FormRow columns={2}>
          <FormField name="firstName" required framed>
            <FormLabel>First name</FormLabel>
            <FormControl asChild>
              <Input placeholder="First name" autoComplete="given-name" />
            </FormControl>
          </FormField>

          <FormField name="lastName" required framed>
            <FormLabel>Last name</FormLabel>
            <FormControl asChild>
              <Input placeholder="Last name" autoComplete="family-name" />
            </FormControl>
          </FormField>
        </FormRow>

        <FormField name="studentId" required framed>
          <FormLabel>Student ID</FormLabel>
          <FormControl asChild>
            <Input placeholder="e.g. THR-10429" autoComplete="off" />
          </FormControl>
          <FormHint>Used for audit logs, billing exports, and cross-system matching.</FormHint>
        </FormField>

        <FormFooter align="end" divider>
          <Button size="sm" variant="ghost">Cancel</Button>
          <Button size="sm" variant="primary">Save</Button>
        </FormFooter>
      </FormSection>
    </Form>
  );
}

import { Form, FormField, FormLabel, FormControl, FormHint } from "@/design-system/components/form";
import { Input } from "@/design-system/components/Input";

export function Example() {
  return (
    <Form layout="horizontal" density="compact">
      <FormField name="timezone" framed>
        <FormLabel>Timezone</FormLabel>
        <FormControl asChild>
          <Input placeholder="America/New_York" />
        </FormControl>
        <FormHint>Used for scheduling and reminders.</FormHint>
      </FormField>

      <FormField name="npi" framed>
        <FormLabel optional>NPI</FormLabel>
        <FormControl asChild>
          <Input placeholder="Optional" />
        </FormControl>
      </FormField>
    </Form>
  );
}

// See: src/app/[locale]/docs/components/form/_components/FormValidationPreview.tsx

import { FormSection, FormRow, FormField, FormLabel, FormControl } from "@/design-system/components/form";
import { Input } from "@/design-system/components/Input";

export function Example() {
  return (
    <FormSection
      variant="program"
      tone="neutral"
      title="Diagnostics"
      description="Power-user configuration panel for admin/support workflows."
    >
      <FormRow columns={2}>
        <FormField name="traceId" framed>
          <FormLabel>Trace ID</FormLabel>
          <FormControl asChild>
            <Input placeholder="Paste a trace id" />
          </FormControl>
        </FormField>

        <FormField name="sessionKey" framed>
          <FormLabel>Session key</FormLabel>
          <FormControl asChild>
            <Input placeholder="Paste a session key" />
          </FormControl>
        </FormField>
      </FormRow>
    </FormSection>
  );
}