ComponentsForm
Fieldset
A semantic fieldset with styled legend for grouping related form fields.
Default
Disabled
Installation
npx visor add fieldsetThis copies two files into your project:
components/ui/fieldset/fieldset.tsx— the componentcomponents/ui/fieldset/fieldset.module.css— the styles
Usage
import { Fieldset, FieldsetLegend } from '@/components/ui/fieldset/fieldset';
<Fieldset>
<FieldsetLegend>Contact Information</FieldsetLegend>
{/* form fields */}
</Fieldset>API Reference
FieldsetProps
| Prop | Type | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables all form controls within the fieldset. |
className | string | — | Additional CSS class names to merge onto the element. |
...props | React.FieldsetHTMLAttributes<HTMLFieldSetElement> | — | All standard HTML fieldset attributes are forwarded. |
Sub-components
| Component | Element | Purpose |
|---|---|---|
Fieldset | <fieldset> | Semantic grouping element for related form controls |
FieldsetLegend | <legend> | Accessible caption for the fieldset, announced by screen readers |
Accessibility
- Renders a native
<fieldset>element — semantically groups related controls FieldsetLegendrenders a<legend>, which screen readers associate with all controls inside the fieldset- Setting
disabledon the<fieldset>propagates to all descendant form controls automatically via the browser - Prefer
Fieldset+FieldsetLegendover generic<div>wrappers when controls share a logical purpose (e.g., address fields, contact info)