Component

Fieldset

A semantic form grouping primitive for related controls, legends, descriptions, and validation messages.

preview

Delivery window

Select when someone will be available to receive the package.

MorningAfternoon

Select one delivery window.

React
"use client"

import Fieldset from "@radui/ui/Fieldset"

export default function FieldsetExample() {
    return (
        <Fieldset.Root className="flex w-full max-w-[360px] flex-col gap-3" invalid>
            <Fieldset.Legend>Delivery window</Fieldset.Legend>
            <Fieldset.Description id="delivery-description">
                Select when someone will be available to receive the package.
            </Fieldset.Description>
            <label className="flex items-center gap-2">
                <input type="radio" name="delivery-window" value="morning" aria-describedby="delivery-description" />
                Morning
            </label>
            <label className="flex items-center gap-2">
                <input type="radio" name="delivery-window" value="afternoon" aria-describedby="delivery-description" />
                Afternoon
            </label>
            <Fieldset.Message invalid>Select one delivery window.</Fieldset.Message>
        </Fieldset.Root>
    )
}

Features

Uses native fieldset and legend elements for grouped form controls
Propagates disabled state through the browser's form semantics
Provides description and validation message slots
Exposes stable data-slot, data-disabled, and data-invalid hooks

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import Fieldset from "@radui/ui/Fieldset"

export default () => {
    return (
        <Fieldset.Root>
            <Fieldset.Legend />
            <Fieldset.Description />
            <Fieldset.Message />
        </Fieldset.Root>
    )
}

Root

The native fieldset element used to group related form controls.

Prop	Type	Default
customRootClass	string	""
disabled	boolean	false
invalid	boolean	false
name	string	--
form	string	--
color	string	""
size	string	""
variant	string	""

Legend

The native legend element that labels the fieldset.

Prop	Type	Default
children	ReactNode	--
className	string	--

Description

Optional descriptive text for the grouped controls.

Prop	Type	Default
children	ReactNode	--
id	string	--

Message

Optional helper or validation message for the grouped controls.

Prop	Type	Default
invalid	boolean	false
role	string	--
children	ReactNode	--

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus through enabled form controls inside the fieldset.

ARIA References

Reference	What Rad UI follows
Fieldset semantics	Uses the native fieldset and legend relationship so assistive technology announces the group label with contained controls.