Fieldset

A native fieldset element with a legend.

Billing Details

The name that will appear on invoices.

Your business tax identification number.

Overview

Use Fieldset to group related form controls under one legend.

Fieldset is useful for radio groups, checkbox groups, address sections, permission groups, and any form area where several inputs answer one larger question.

Anatomy

A fieldset has a container, legend, optional description, and controls. The legend names the group. The controls inside should all relate to that group.

Usage guidance

Use Field for one control. Use Fieldset for a set of related controls. Combine both when each control in the group also needs its own label, description, or error.

Accessibility

The legend gives assistive technology context for the controls inside. Keep it visible and specific.

Installation

npm
npx love-ui@latest add fieldset

Usage

import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"
<Fieldset>
  <FieldsetLegend>Fieldset legend</FieldsetLegend>
</Fieldset>

On this page