Form

import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';

export default function BasicDemo() {
  return (
    <Form
      className="mx-auto w-full max-w-md"
      onSubmit={(event) => event.preventDefault()}
    >
      <Form.Field label="Full name" htmlFor="basic-name">
        <Input id="basic-name" name="name" placeholder="Jordan Blake" />
      </Form.Field>

      <Form.Field label="Email" htmlFor="basic-email">
        <Input
          id="basic-email"
          name="email"
          type="email"
          placeholder="jordan@example.com"
        />
      </Form.Field>

      <Form.Field label="Notes" htmlFor="basic-notes">
        <Input
          id="basic-notes"
          name="notes"
          textArea
          placeholder="Add a short note"
        />
      </Form.Field>

      <div className="flex justify-end gap-2">
        <Button type="reset">Reset</Button>
        <Button type="submit" variant="solid">
          Submit
        </Button>
      </div>
    </Form>
  );
}

import { useState } from 'react';
import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';
import Segment from '@/components/ui/Segment';

type FormLayout = 'vertical' | 'horizontal' | 'inline';

const layouts: { label: string; value: FormLayout }[] = [
  { label: 'Vertical', value: 'vertical' },
  { label: 'Horizontal', value: 'horizontal' },
  { label: 'Inline', value: 'inline' },
];

export default function FormLayoutDemo() {
  const [layout, setLayout] = useState<FormLayout>('vertical');

  return (
    <div className="mx-auto w-full max-w-lg space-y-4">
      <div className="flex justify-center">
        <Segment
          value={layout}
          onChange={(value) => setLayout(value as FormLayout)}
        >
          {layouts.map((item) => (
            <Segment.Item key={item.value} value={item.value}>
              {item.label}
            </Segment.Item>
          ))}
        </Segment>
      </div>

      <Form
        layout={layout}
        labelWidth={120}
        onSubmit={(event) => event.preventDefault()}
      >
        <Form.Field label="Name" htmlFor="layout-name">
          <Input id="layout-name" name="name" placeholder="Jordan Blake" />
        </Form.Field>

        <Form.Field label="Email" htmlFor="layout-email">
          <Input
            id="layout-email"
            name="email"
            type="email"
            placeholder="jordan@example.com"
          />
        </Form.Field>

        <Form.Field>
          <Button type="submit" variant="solid">
            Submit
          </Button>
        </Form.Field>
      </Form>
    </div>
  );
}

import { useState } from 'react';
import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';
import Segment from '@/components/ui/Segment';

type ControlSize = 'sm' | 'md' | 'lg';

const sizes: { label: string; value: ControlSize }[] = [
  { label: 'Small', value: 'sm' },
  { label: 'Medium', value: 'md' },
  { label: 'Large', value: 'lg' },
];

export default function FormSizeDemo() {
  const [size, setSize] = useState<ControlSize>('md');

  return (
    <div className="mx-auto w-full max-w-md space-y-4">
      <div className="flex justify-center">
        <Segment
          value={size}
          onChange={(value) => setSize(value as ControlSize)}
        >
          {sizes.map((item) => (
            <Segment.Item key={item.value} value={item.value}>
              {item.label}
            </Segment.Item>
          ))}
        </Segment>
      </div>

      <Form size={size} onSubmit={(event) => event.preventDefault()}>
        <Form.Field label="Project" htmlFor="size-project">
          <Input id="size-project" name="project" placeholder="Launch plan" />
        </Form.Field>

        <Form.Field label="Owner" htmlFor="size-owner">
          <Input id="size-owner" name="owner" placeholder="Jordan Blake" />
        </Form.Field>

        <div className="flex justify-end gap-2">
          <Button type="reset" size={size}>
            Reset
          </Button>
          <Button type="submit" variant="solid" size={size}>
            Save
          </Button>
        </div>
      </Form>
    </div>
  );
}

import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';

export default function LabelExtraDemo() {
  return (
    <Form
      className="mx-auto w-full max-w-md"
      onSubmit={(event) => event.preventDefault()}
    >
      <Form.Field
        label="Workspace"
        htmlFor="extra-workspace"
        asterisk
        extra={<span className="text-xs text-muted-foreground">Required</span>}
      >
        <Input
          id="extra-workspace"
          name="workspace"
          placeholder="Northwind Sales"
        />
      </Form.Field>

      <Form.Field
        label="Reference"
        htmlFor="extra-reference"
        extra={<span className="text-xs text-muted-foreground">Optional</span>}
      >
        <Input
          id="extra-reference"
          name="reference"
          placeholder="Internal project code"
        />
      </Form.Field>

      <Form.Field
        label="Summary"
        htmlFor="extra-summary"
        extra={<span className="text-xs text-muted-foreground">0/120</span>}
      >
        <Input
          id="extra-summary"
          name="summary"
          textArea
          placeholder="Short summary"
        />
      </Form.Field>

      <div className="flex justify-end gap-2">
        <Button type="submit" variant="solid">
          Continue
        </Button>
      </div>
    </Form>
  );
}

import { PiQuestion } from 'react-icons/pi'
import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';
import Tooltip from '@/components/ui/Tooltip';

export default function MessageDemo() {
  return (
    <Form
      className="mx-auto w-full max-w-md"
      onSubmit={(event) => event.preventDefault()}
    >
      <Form.Field
        label="Workspace slug"
        htmlFor="message-slug"
        hint="Use lowercase letters, numbers, and dashes."
      >
        <Input
          id="message-slug"
          name="slug"
          placeholder="northwind-sales"
        />
      </Form.Field>

      <Form.Field
        label="Billing contact"
        htmlFor="message-billing"
        extra={
          <Tooltip 
            title="This person receives receipts and renewal notices."
            wrapperClass="flex items-center"
          >
            <span
              tabIndex={0}
              aria-label="Billing contact help"
              className="inline-flex cursor-help items-center text-muted-foreground"
            >
              <PiQuestion className="text-base" />
            </span>
          </Tooltip>
        }
      >
        <Input
          id="message-billing"
          name="billing"
          type="email"
          placeholder="billing@example.com"
        />
      </Form.Field>

      <div className="flex justify-end gap-2">
        <Button type="submit" variant="solid">
          Save
        </Button>
      </div>
    </Form>
  );
}

import { useState, type FormEvent } from 'react';
import Button from '@/components/ui/Button';
import Form from '@/components/ui/Form';
import Input from '@/components/ui/Input';

type FormValues = {
  name: string;
  email: string;
  handle: string;
};

type FormErrors = Partial<Record<keyof FormValues, string>>;

const initialValues: FormValues = {
  name: '',
  email: '',
  handle: '',
};

function validate(values: FormValues) {
  const nextErrors: FormErrors = {};

  if (!values.name.trim()) {
    nextErrors.name = 'Enter a name.';
  }

  if (!values.email.trim()) {
    nextErrors.email = 'Enter an email address.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) {
    nextErrors.email = 'Enter a valid email address.';
  }

  if (!values.handle.trim()) {
    nextErrors.handle = 'Enter a handle.';
  } else if (!/^[a-z0-9-]+$/.test(values.handle)) {
    nextErrors.handle = 'Use lowercase letters, numbers, and dashes.';
  }

  return nextErrors;
}

export default function ValidationDemo() {
  const [values, setValues] = useState<FormValues>(initialValues);
  const [errors, setErrors] = useState<FormErrors>({});
  const [submitted, setSubmitted] = useState(false);

  const updateField = (field: keyof FormValues, value: string) => {
    setValues((current) => ({ ...current, [field]: value }));
    setErrors((current) => {
      const { [field]: _removed, ...rest } = current;
      return rest;
    });
    setSubmitted(false);
  };

  const handleSubmit = (event: FormEvent) => {
    event.preventDefault();

    const nextErrors = validate(values);
    setErrors(nextErrors);
    setSubmitted(Object.keys(nextErrors).length === 0);
  };

  return (
    <Form className="mx-auto w-full max-w-md" noValidate onSubmit={handleSubmit}>
      <Form.Field
        label="Name"
        htmlFor="validation-name"
        asterisk
        invalid={Boolean(errors.name)}
        errorMessage={errors.name}
      >
        <Input
          id="validation-name"
          name="name"
          value={values.name}
          placeholder="Jordan Blake"
          onChange={(event) => updateField('name', event.target.value)}
        />
      </Form.Field>

      <Form.Field
        label="Email"
        htmlFor="validation-email"
        asterisk
        invalid={Boolean(errors.email)}
        errorMessage={errors.email}
      >
        <Input
          id="validation-email"
          name="email"
          type="email"
          value={values.email}
          placeholder="jordan@example.com"
          onChange={(event) => updateField('email', event.target.value)}
        />
      </Form.Field>

      <Form.Field
        label="Handle"
        htmlFor="validation-handle"
        invalid={Boolean(errors.handle)}
        errorMessage={errors.handle}
      >
        <Input
          id="validation-handle"
          name="handle"
          value={values.handle}
          placeholder="jordan-blake"
          onChange={(event) => updateField('handle', event.target.value)}
        />
      </Form.Field>

      {submitted ? (
        <div className="mb-4 rounded-control border border-success/30 bg-success-soft p-3 text-success">
          Validation passed. The form is ready to submit.
        </div>
      ) : null}

      <div className="flex justify-end gap-2">
        <Button
          type="button"
          onClick={() => {
            setValues(initialValues);
            setErrors({});
            setSubmitted(false);
          }}
        >
          Reset
        </Button>
        <Button type="submit" variant="solid">
          Validate
        </Button>
      </div>
    </Form>
  );
}