Fieldset

A native fieldset element with an easily stylable legend.

Preview

Installation

Install

npx shadcn@latest add https://ghost-ui.com/r/fieldset.json

Basic usage

12345import { Field } from "@/components/ui/field";
import { Fieldset } from "@/components/ui/fieldset";
import { Input } from "@/components/ui/input";

<Fieldset.Root><Fieldset.Legend>Profile</Fieldset.Legend><Fieldset.Joint><Fieldset.Cell><Field.Root placement="ifta"><Field.Label>Name</Field.Label><Input name="name" /></Field.Root></Fieldset.Cell></Fieldset.Joint></Fieldset.Root>

Structures

Examples

Payment joint IFTA

Persistent labels keep cardholder, card number, expiry, and CVV independently named and focusable inside one boundary. Edit or leave expiry and CVV to see caller-owned validation; digits are filtered and the initial values are valid.

Address joint IFTA

The address example keeps the optional second line empty by default, composes the canonical Select for country, and validates the postal boundary on edit or blur without a submit action.

Disabled joint group

Keep saved values visible while the group is locked.

Saved billing contact

Contact name

API reference

For inherited behavior and additional part properties, see the Base UI Fieldset API.

Fieldset.Root properties
Prop	Type	Default	Description
`disabled`	`boolean`	`false`	Disables controls within the related field group.
`className`	`string \| ((state: FieldsetRootState) => string)`		CSS class applied to the element, or a function that returns a class based on the component's state.
`style`	`CSSProperties \| ((state: FieldsetRootState) => React.CSSProperties)`		Style applied to the element, or a function that returns a style object based on the component's state.
`render`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, FieldsetRootState>`		Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

Joint, Row, and Cell accept native div attributes, className and div refs. Joint owns the shared boundary; Row groups adjacent cells; each Cell contains its own Field with placement="ifta". Root and Legend retain Base UI render, state callback and ref support.