Fieldset

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

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

With error text

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