Fieldset

Overview

A fieldset is used within a form and consists of a group of related input controls that allows users to provide data or configure options. A form is designed for submitting data, so be as concise as possible when building. Think about each field and what value the data will provide. What do we gain by collecting this information?

Basic

<fieldset className="grid">
  <label
    htmlFor="name"
    id="name-label"
    className="ml-4 mb-2 font-semibold flex optional"
  >
    Full name
  </label>
  <input
    placeholder="Kenya Hara"
    type="text"
    id="name"
    aria-label="Name"
    aria-labelledby="name-label"
    className="p-4 mb-4 border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700"
  />
  <label
    htmlFor="email"
    id="email-label"
    className="ml-4 mb-2 font-semibold flex"
  >
    Email address
  </label>
  <input
    placeholder="your@email.com"
    type="email"
    id="email"
    aria-label="Email"
    aria-labelledby="email-label"
    className="p-4 border-2 rounded-2xl border-gray-200 dark:bg-gray-900 dark:border-gray-700"
    required
  />
</fieldset>