Fieldset

Fieldset is a native fieldset drawn as a Mac group box: an ink frame with its legend in pixel caps set into the top border. It groups related fields, and disabling it disables them all. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

import "@/components/dithercharts/controls.css"
import { Fieldset } from "@/components/dithercharts/fieldset"
import { Input } from "@/components/dithercharts/input"

<Fieldset legend="Billing" hint="As on your card">
  <Input label="Name" autoComplete="name" />
  <Input label="Postcode" autoComplete="postal-code" />
</Fieldset>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add fieldset

Props

It renders a native element, so every other attribute that element takes passes through.