kitchen-sink-server/src/pages/examples/registration-form.tsx

import { NextPage } from 'next';
import * as Freeform from '@tesseract-design/web-freeform-react';
import * as Action from '@tesseract-design/web-action-react';
import { ButtonVariant } from '@tesseract-design/web-base-button';

const RegistrationFormPage: NextPage = () => {
  return (
    <main className="my-16 md:my-32">
      <div className="container mx-auto px-4">
        <h1>
          Registration Form
        </h1>
        <p>
          Input your data in order to gain access to the functions of this service.
        </p>
        <form>
          <fieldset className="contents">
            <legend className="sr-only">
              Register
            </legend>
            <div className="grid sm:grid-cols-6 gap-4">
              <div className="sm:col-span-2">
                <Freeform.TextInput
                  block
                  border
                  label="First Name"
                  name="firstName"
                />
              </div>
              <div className="sm:col-span-2">
                <Freeform.TextInput
                  block
                  border
                  label="Middle Name"
                  name="middleName"
                />
              </div>
              <div className="sm:col-span-2">
                <Freeform.TextInput
                  block
                  border
                  label="Last Name"
                  name="lastName"
                />
              </div>
              <div className="sm:col-span-3">
                <Freeform.TextInput
                  block
                  border
                  label="Email"
                  name="email"
                />
              </div>
              <div className="sm:col-span-3">
                <Freeform.TextInput
                  block
                  border
                  label="Website"
                  name="website"
                />
              </div>
              <div className="sm:col-span-6 text-center">
                <div
                  className="sm:flex items-center justify-end space-y-4 sm:space-y-0 sm:space-x-4"
                >
                  <small>
                    By registering, you agree to the <a href="#">Terms</a> of this service.
                  </small>
                  {' '}
                  <div>
                    <Action.ActionButton
                      variant={ButtonVariant.FILLED}
                      block
                      border
                      type={Action.ActionButtonType.SUBMIT}
                      menuItem
                      subtext="Registration requires activation"
                    >
                      Submit
                    </Action.ActionButton>
                  </div>
                </div>
              </div>
            </div>
          </fieldset>
        </form>
      </div>
    </main>
  )
}

export default RegistrationFormPage;