# Fieldset

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

Status: stable. Added in Components 2.0.0. Updated in Components 2.3.0, 15 Apr 2026.

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

## Import

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

## Examples

### Default

```tsx
<Fieldset>
  <Fieldset.Legend>Contact information</Fieldset.Legend>
  <Field>
    <Field.Label>Name</Field.Label>
    <Field.Input placeholder='Your name' />
  </Field>
  <Field>
    <Field.Label>Email</Field.Label>
    <Field.Input type='email' placeholder='you@example.com' />
  </Field>
</Fieldset>
```

### Composition

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

#### With helper text

```tsx
<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' />
  </Field>
  <Field>
    <Field.Label>Email</Field.Label>
    <Field.Input type='email' placeholder='you@example.com' />
  </Field>
</Fieldset>
```

#### With error text

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

## API reference

### Fieldset

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

- `invalid`: `boolean`.

### Fieldset.ErrorText

No props beyond the standard HTML attributes.

### Fieldset.HelperText

No props beyond the standard HTML attributes.

### Fieldset.Legend

No props beyond the standard HTML attributes.

Docs updated 19 Oct 2026.