Form 10.17.4

ARIA

RTL

Form component is a grouping of input controls that allow a user to submit information to a server.
You can set the size prop for Form and this size will be applied to all children's components.
You can set disabled and error props prop for Form.Item and this props will be applied to all children's.

Default

"use client";

import {
  Form,
  Label,
  Hint,
  Input,
  Textarea,
  Button,
  NativeSelect,
} from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const options = [
  { name: "01" },
  { name: "02" },
  { name: "03" },
  { name: "04" },
  { name: "05" },
  { name: "06" },
];

const Default = () => (
  <Form
    className="flex flex-col gap-4 w-full max-w-sm"
    method="get"
    id="login"
    onSubmit={() => console.log("Submit")}
  >
    <Form.Item error>
      <Label htmlFor="name">Username</Label>
      <Input placeholder="Your username..." id="name" />
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </Form.Item>
    <Form.Item>
      <Label htmlFor="email">Email</Label>
      <Input placeholder="Your Email..." id="email" type="email" />
    </Form.Item>
    <Form.Item className="flex gap-2">
      <fieldset className="w-full">
        <Label htmlFor="month">Month</Label>
        <NativeSelect id="month">
          {options.map((opt, key) => (
            <option value={opt.name} key={key}>
              {opt.name}
            </option>
          ))}
        </NativeSelect>
      </fieldset>
      <fieldset className="w-full">
        <Label htmlFor="year">Year</Label>
        <NativeSelect id="year">
          {options.map((opt, key) => (
            <option value={opt.name} key={key}>
              {opt.name}
            </option>
          ))}
        </NativeSelect>
      </fieldset>
    </Form.Item>
    <Form.Item>
      <Label htmlFor="info">Additional information</Label>
      <Textarea id="info" />
    </Form.Item>
    <Button type="submit" form="login" value="Submit">
      Create account
    </Button>
  </Form>
);

export default Default;

Size

Form items, by default, have a medium size. You can set a Form size property to sm or lg to manipulate the sizing of use Input and NativeSelect components. Textarea does not have a size property and will remain the same. You need to paste the corresponding size into the Button component in order to fit it into the general Form style.

"use client";

import {
  Form,
  Label,
  Hint,
  Input,
  Textarea,
  Button,
  NativeSelect,
} from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const options = [
  { name: "01" },
  { name: "02" },
  { name: "03" },
  { name: "04" },
  { name: "05" },
  { name: "06" },
];

const Sizes = () => (
  <>
    <Form
      className="flex flex-col gap-4 w-full max-w-sm"
      method="get"
      id="login"
      onSubmit={() => console.log("Submit")}
      size="sm"
    >
      <Form.Item error>
        <Label htmlFor="name">Username</Label>
        <Input placeholder="Your username..." id="name" />
        <Hint error>
          <GenericInfo />
          Informative message holder
        </Hint>
      </Form.Item>
      <Form.Item>
        <Label htmlFor="email">Email</Label>
        <Input placeholder="Your Email..." id="email" type="email" />
      </Form.Item>
      <Form.Item className="flex gap-2">
        <fieldset className="w-full">
          <Label htmlFor="month">Month</Label>
          <NativeSelect id="month">
            {options.map((opt, key) => (
              <option value={opt.name} key={key}>
                {opt.name}
              </option>
            ))}
          </NativeSelect>
        </fieldset>
        <fieldset className="w-full">
          <Label htmlFor="year">Year</Label>
          <NativeSelect id="year">
            {options.map((opt, key) => (
              <option value={opt.name} key={key}>
                {opt.name}
              </option>
            ))}
          </NativeSelect>
        </fieldset>
      </Form.Item>
      <Form.Item>
        <Label htmlFor="info">Additional information</Label>
        <Textarea id="info" />
      </Form.Item>
      <Button type="submit" form="login" value="Submit" size="sm">
        Create account
      </Button>
    </Form>
    <Form
      className="flex flex-col gap-4 w-full max-w-sm"
      method="get"
      id="login"
      onSubmit={() => console.log("Submit")}
      size="lg"
    >
      <Form.Item error>
        <Label htmlFor="name">Username</Label>
        <Input placeholder="Your username..." id="name" />
        <Hint error>
          <GenericInfo />
          Informative message holder
        </Hint>
      </Form.Item>
      <Form.Item>
        <Label htmlFor="email">Email</Label>
        <Input placeholder="Your Email..." id="email" type="email" />
      </Form.Item>
      <Form.Item className="flex gap-2">
        <fieldset className="w-full">
          <Label htmlFor="month">Month</Label>
          <NativeSelect id="month">
            {options.map((opt, key) => (
              <option value={opt.name} key={key}>
                {opt.name}
              </option>
            ))}
          </NativeSelect>
        </fieldset>
        <fieldset className="w-full">
          <Label htmlFor="year">Year</Label>
          <NativeSelect id="year">
            {options.map((opt, key) => (
              <option value={opt.name} key={key}>
                {opt.name}
              </option>
            ))}
          </NativeSelect>
        </fieldset>
      </Form.Item>
      <Form.Item>
        <Label htmlFor="info">Additional information</Label>
        <Textarea id="info" />
      </Form.Item>
      <Button type="submit" form="login" value="Submit" size="lg">
        Create account
      </Button>
    </Form>
  </>
);

export default Sizes;

With inset items

If you need to make Form items even bigger, use InsetInput and InsetNativeSelect components instead. Textarea has only one size, so it will remain the same. You need to set size="xl" in the Button component in order to fit it into the general Form style.

"use client";

import {
  Form,
  Label,
  Hint,
  InsetInput,
  Textarea,
  Button,
  InsetNativeSelect,
} from "@heathmont/moon-core-tw";
import { GenericInfo } from "@heathmont/moon-icons-tw";

const options = [
  { name: "01" },
  { name: "02" },
  { name: "03" },
  { name: "04" },
  { name: "05" },
  { name: "06" },
];

const WithInsetItems = () => (
  <Form
    className="flex flex-col gap-4 w-full max-w-sm"
    method="get"
    id="login"
    onSubmit={() => console.log("Submit")}
  >
    <Form.Item error>
      <InsetInput placeholder="Your username..." id="name">
        <InsetInput.Label>Username</InsetInput.Label>
      </InsetInput>
      <Hint error>
        <GenericInfo />
        Informative message holder
      </Hint>
    </Form.Item>
    <Form.Item>
      <InsetInput placeholder="Your Email..." id="email" type="email">
        <InsetInput.Label>Email</InsetInput.Label>
      </InsetInput>
    </Form.Item>
    <Form.Item className="flex gap-2">
      <fieldset className="w-full">
        <InsetNativeSelect id="month" label="Month">
          {options.map((opt, key) => (
            <option value={opt.name} key={key}>
              {opt.name}
            </option>
          ))}
        </InsetNativeSelect>
      </fieldset>
      <fieldset className="w-full">
        <InsetNativeSelect id="year" label="Year">
          {options.map((opt, key) => (
            <option value={opt.name} key={key}>
              {opt.name}
            </option>
          ))}
        </InsetNativeSelect>
      </fieldset>
    </Form.Item>
    <Form.Item>
      <Label htmlFor="info">Additional information</Label>
      <Textarea id="info" />
    </Form.Item>
    <Button type="submit" form="login" value="Submit" size="xl">
      Create account
    </Button>
  </Form>
);

export default WithInsetItems;

Form

These are props specific to the Form component:

Name	Type	Default
className	string	-
size	"sm" \| "md" \| "lg"	md

Form.Item

These are props specific to the Form.Item component:

Name	Type	Default
className	string	-
disabled	boolean	-
error	boolean	-
size	"sm" \| "md" \| "lg"	-