@spark-web/fieldset

title: Fieldset storybookPath: forms-fieldset--default isExperimentalPackage: true

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

<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.

<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