v1.1.6

Fieldset

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/fieldset

npm @spark-web/fieldset

Source GitHub.com

Bundle unpkg.com

Use the Fieldset to group thematically related controls in a form.

Billing address

Street

City

State

Postcode

Open in Playroom

<Fieldset legend="Billing address">
  <Stack gap="small">
    <Field label="Street">
      <TextInput />
    </Field>
    <Field label="City">
      <TextInput />
    </Field>
    <Field label="State">
      <Select
        onChange={() => {}}
        options={[
          { label: 'New South Wales', value: 'NSW' },
          { label: 'Victoria', value: 'VIC' },
          { label: 'Queensland', value: 'QLD' },
          { label: 'South Australia', value: 'SA' },
          { label: 'Western Australia', value: 'WA' },
          { label: 'Tasmania', value: 'TAS' },
          { label: 'Northern Territory', value: 'NT' },
          { label: 'Australian Capital Territory', value: 'ACT' },
        ]}
      />
    </Field>
    <Field label="Postcode">
      <TextInput />
    </Field>
  </Stack>
</Fieldset>

<Fieldset legend="Billing address">
  <Stack gap="small">
    <Field label="Street">
      <TextInput />
    </Field>
    <Field label="City">
      <TextInput />
    </Field>
    <Field label="State">
      <Select
        onChange={() => {}}
        options={[
          { label: 'New South Wales', value: 'NSW' },
          { label: 'Victoria', value: 'VIC' },
          { label: 'Queensland', value: 'QLD' },
          { label: 'South Australia', value: 'SA' },
          { label: 'Western Australia', value: 'WA' },
          { label: 'Tasmania', value: 'TAS' },
          { label: 'Northern Territory', value: 'NT' },
          { label: 'Australian Capital Territory', value: 'ACT' },
        ]}
      />
    </Field>
    <Field label="Postcode">
      <TextInput />
    </Field>
  </Stack>
</Fieldset>

Example

Legend

Provide a caption that describes the set of form fields.

Name

First

Last

Open in Playroom

<Fieldset legend="Name">
  <Columns gap="small">
    <Field label="First" labelVisibility="hidden">
      <TextInput placeholder="e.g. Jane" />
    </Field>
    <Field label="Last" labelVisibility="hidden">
      <TextInput placeholder="e.g. Smith" />
    </Field>
  </Columns>
</Fieldset>

<Fieldset legend="Name">
  <Columns gap="small">
    <Field label="First" labelVisibility="hidden">
      <TextInput placeholder="e.g. Jane" />
    </Field>
    <Field label="Last" labelVisibility="hidden">
      <TextInput placeholder="e.g. Smith" />
    </Field>
  </Columns>
</Fieldset>

Props

Prop	Type	Description
children?	ReactNode: string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal	The form fields that comprise the set.
data?	DataAttributeMap	Sets data attributes on the component.
gap?	"small" \| "medium" \| "large"	Sets the size of the gap between the legend and children. Default: `"small"`
id?	string	An identifier which must be unique in the whole document.
legend?	string	Provide a caption that describes the set of form fields. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend