Fieldset

A native fieldset element with an easily stylable legend.

View as Markdown Base UI source

Base UI React 1.8.0

Billing details

Company

Tax ID

FineSoft Stencil

Billing details

Company

Tax ID

react-fieldset.tsx stencil-fieldset.tsx index.module.css

import { Field } from '@base-ui/react/field';
import { Fieldset } from '@base-ui/react/fieldset';
import styles from './index.module.css';

export default function ExampleField() {
  return (
    <Fieldset.Root className={styles.Fieldset}>
      <Fieldset.Legend className={styles.Legend}>Billing details</Fieldset.Legend>

      <Field.Root className={styles.Field}>
        <Field.Label className={styles.Label}>Company</Field.Label>
        <Field.Control placeholder="Enter company name" className={styles.Input} />
      </Field.Root>

      <Field.Root className={styles.Field}>
        <Field.Label className={styles.Label}>Tax ID</Field.Label>
        <Field.Control placeholder="Enter fiscal number" className={styles.Input} />
      </Field.Root>
    </Fieldset.Root>
  );
}

The Stencil comparison uses fs-fieldset-root and fs-fieldset-legend with fs-field-root, fs-field-label, and fs-field-control for its controls. Field supplies their label registration, validation, and field-state attributes. The migrated Form adds inherited validation mode, consolidated values, form-level errors, and submit validation.

The Base UI theme is built in; set data-fs-theme="base-ui" on an ancestor to style the Stencil parts without component classes. Legend exposes its native label through fs-fieldset-legend::part(legend) for custom styling. Root keeps its native fieldset in Light DOM so descendant controls retain native disabled inheritance and form ownership.

Anatomy

Import the component and assemble its parts:

Anatomy

import { Fieldset } from '@base-ui/react/fieldset';

<Fieldset.Root>
  <Fieldset.Legend />
</Fieldset.Root>

API reference

Root

Groups a shared legend with related controls. Renders a <fieldset> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Fieldset.Root.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Fieldset.Root.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: Fieldset.Root.State, ) => ReactElement) | undefined

Fieldset.Root.PropsHide

Re-Export of Root props as FieldsetRootProps

Fieldset.Root.StateHide

type FieldsetRootState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
}

Legend

An accessible label that is automatically associated with the fieldset. Renders a <div> element.

classNamestring | function—

Name: className
Description: CSS class applied to the element, or a function that returns a class based on the component’s state.
Type: | string | ((state: Fieldset.Legend.State) => string | undefined) | undefined

styleReact.CSSProperties | function—

Name: style
Description: Style applied to the element, or a function that returns a style object based on the component’s state.
Type: | React.CSSProperties | (( state: Fieldset.Legend.State, ) => React.CSSProperties | undefined) | undefined

renderReactElement | function—

Name: render
Description: 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.
Type: | ReactElement | (( props: HTMLProps, state: Fieldset.Legend.State, ) => ReactElement) | undefined

Fieldset.Legend.PropsHide

Re-Export of Legend props as FieldsetLegendProps

Fieldset.Legend.StateHide

type FieldsetLegendState = {
  /** Whether the component should ignore user interaction. */
  disabled: boolean;
}