Fieldset

Status

Stable

Added

Components 2.0.08 Apr 2026

Updated

Components 2.3.015 Apr 2026

Docs updated

19 Oct 2026

A compound wrapper for grouping related form fields with a legend.

Import

import { Fieldset } from '@oztix/roadie-components/fieldset'

Examples

Default

<Fieldset>
  <Fieldset.Legend>Contact information</Fieldset.Legend>
  <Field>
    <Field.Label>Name</Field.Label>
    <Field.Input placeholder='Your name' />
  </Field>

Composition

Fieldset exposes sub-components for legend, helper text, and error text.

With helper text

<Fieldset>
  <Fieldset.Legend>Contact information</Fieldset.Legend>
  <Fieldset.HelperText>Provide your preferred contact details.</Fieldset.HelperText>
  <Field>
    <Field.Label>Name</Field.Label>
    <Field.Input placeholder='Your name' />

With error text

<Fieldset invalid>
  <Fieldset.Legend>Preferences</Fieldset.Legend>
  <Fieldset.ErrorText>Choose at least one option.</Fieldset.ErrorText>
</Fieldset>

API reference

Fieldset

invalidboolean

Fieldset.ErrorText

No additional props. It forwards all standard HTML attributes to the underlying element.

Fieldset.HelperText

No additional props. It forwards all standard HTML attributes to the underlying element.

Fieldset.Legend

No additional props. It forwards all standard HTML attributes to the underlying element.

A compound wrapper for grouping related form fields with a legend.

Import

import { Fieldset } from '@oztix/roadie-components/fieldset'

Examples

Default

<Fieldset>
  <Fieldset.Legend>Contact information</Fieldset.Legend>
  <Field>
    <Field.Label>Name</Field.Label>
    <Field.Input placeholder='Your name' />
  </Field>

Composition

Fieldset exposes sub-components for legend, helper text, and error text.

With helper text

<Fieldset>
  <Fieldset.Legend>Contact information</Fieldset.Legend>
  <Fieldset.HelperText>Provide your preferred contact details.</Fieldset.HelperText>
  <Field>
    <Field.Label>Name</Field.Label>
    <Field.Input placeholder='Your name' />

With error text

<Fieldset invalid>
  <Fieldset.Legend>Preferences</Fieldset.Legend>
  <Fieldset.ErrorText>Choose at least one option.</Fieldset.ErrorText>
</Fieldset>

API reference

Fieldset

invalidboolean

Fieldset.ErrorText

No additional props. It forwards all standard HTML attributes to the underlying element.

Fieldset.HelperText

No additional props. It forwards all standard HTML attributes to the underlying element.

Fieldset.Legend

No additional props. It forwards all standard HTML attributes to the underlying element.