# Fieldset A titled group of related fields, such as an address, rendered as a `

` named by its legend. `disabled` disables every native control and every `Field` inside it at once. ```tsx import { Fieldset } from "@/components/ouro/field/fieldset"; ``` ## Example ```tsx

``` ## Usage A group of checkboxes or radios that make one choice uses their group component, which takes the same `legend`. ## Use instead when - Use `Field` instead for a single control. ## Props Type: `FieldsetProps`. | Prop | Type | Description | | --- | --- | --- | | `children` (required) | `ReactNode` | The fields and controls in the group. | | `className` | `string` | Layout only: margins, width, grid placement (`mt-6`). Appearance classes warn in development. | | `description` | `ReactNode` | Supporting text under the legend, read after it through `aria-describedby`. | | `disabled` | `boolean` | Disables every native control and every `Field` inside it, and fades the legend. | | `hideLegend` | `boolean` | Hides the legend visually; screen readers still read it as the group's name. | | `legend` (required) | `string` | What the group is, shown above it and read as the group's name. Required: a group of controls needs a name. To hide it visually, keep it and add `hideLegend`. | ## Don't use These are not props. Passing one fails the type check with the fix in the error, and in development a console message names the fix. - `label`: Not a prop. Groups take `legend`: `

`. ## `className` is for layout only Pass margins, width and grid placement (`mt-4`, `w-full`, `col-span-2`). Your classes always win over Ouro UI's: Fieldset merges `className` last with `cn` (tailwind-merge), so a class that conflicts with its own replaces it.[^layout-classes] Appearance comes from props, not classes. In development, a class that sets appearance logs one warning per component instance, naming the prop to use instead. A class sets appearance when, after its variants (`hover:`, `sm:`) and any `!` are removed, it starts with `bg-`, `text-`, `border-`, `rounded-`, `shadow-`, `font-`, `ring-`, `from-`, `via-`, `to-`, `fill-` or `stroke-`, or is `border`, `rounded`, `shadow` or `ring`, or has a `dark:` variant. Text wrapping, overflow and table layout classes (`text-wrap`, `text-ellipsis`, `border-collapse`) are layout and do not warn. Alignment classes (`text-center`) warn too: set alignment on a parent element. [^layout-classes]: test:registry/ouro/components/ouro/field/fieldset.test.tsx::Fieldset > lets app layout classes win verify:testExists(registry/ouro/components/ouro/field/fieldset.test.tsx::Fieldset > lets app layout classes win)