Fieldset

Fieldsets are used to group related form fields.

Demo

Usage

Fieldset content

import { Fieldset } from '@aws-amplify/ui-react';

export const BasicFieldset = () => {
  return <Fieldset legend="Basic fieldset">Fieldset content</Fieldset>;
};

Sizes

Fieldset size can be changed via the size prop. It affects the Fieldset's padding and gap size and the font size of its legend element.

Small fieldset size content.

Default fieldset size content.

Large fieldset size content.

import { Flex, Fieldset } from '@aws-amplify/ui-react';

export const FieldsetSizes = () => {
  return (
    <Flex direction="column">
      <Fieldset legend="Small fieldset" size="small">
        Small fieldset size content.
      </Fieldset>
      <Fieldset legend="Default fieldset">
        Default fieldset size content.
      </Fieldset>
      <Fieldset legend="Large fieldset" size="large">
        Large fieldset size content.
      </Fieldset>
    </Flex>
  );
};

Variation

Fieldset by default uses the plain variation which has no border or padding. Use the outlined variation to add a border and padding.

Outlined fieldset variation content.

Plain fieldset variation content.

import { Flex, Fieldset } from '@aws-amplify/ui-react';

export const FieldsetVariations = () => {
  return (
    <Flex direction="column">
      <Fieldset legend="Outlined fieldset" variation="outlined">
        Outlined fieldset variation content.
      </Fieldset>
      <Fieldset legend="Plain fieldset" variation="plain">
        Plain fieldset variation content.
      </Fieldset>
    </Flex>
  );
};

Direction

Fieldset uses the Flex primitive for layout which allows you to use Flex props to control the direction and alignment of the Fieldset. Use direction="row|row-reverse|column|column-reverse" to change the direction of the Fieldset.

import { Flex, Fieldset, Text, CheckboxField } from '@aws-amplify/ui-react';

export const FieldsetDirection = () => {
  return (
    <Flex direction="column">
      <Fieldset legend="row" direction="row" variation="outlined">
        <CheckboxField label="Item 1" name="Item 1" />
        <CheckboxField label="Item 2" name="Item 2" />
      </Fieldset>
      <Fieldset
        legend="row-reverse"
        direction="row-reverse"
        variation="outlined"
      >
        <CheckboxField label="Item 3" name="Item 3" />
        <CheckboxField label="Item 4" name="Item 4" />
      </Fieldset>
      <Fieldset legend="column" direction="column" variation="outlined">
        <CheckboxField label="Item 5" name="Item 5" />
        <CheckboxField label="Item 6" name="Item 6" />
      </Fieldset>
      <Fieldset
        legend="column-reverse"
        direction="column-reverse"
        variation="outlined"
      >
        <CheckboxField label="Item 7" name="Item 7" />
        <CheckboxField label="Item 8" name="Item 8" />
      </Fieldset>
    </Flex>
  );
};

Disabled

Fieldset can be disabled by using isDisabled={true} prop which will apply the [disabled] attribute to the fieldset. Fieldset has no special disabled styles.

Note about disabled fieldsets:

Disabled fieldsets in HTML will disable all inputs nested within them; even those nested within fieldsets that are not disabled. This is default browser behavior that the Fieldset primitive supports.

The input in this fieldset is disabled because of the parent fieldset.

Test input

This input is also disabled because the fieldset above it is disabled, even though its immediate parent fieldset is not disabled.

Test nested input

import { Fieldset, Text, TextField } from '@aws-amplify/ui-react';

export const DisabledFieldset = () => {
  return (
    <Fieldset legend="Disabled Fieldset" isDisabled variation="outlined">
      <Text fontStyle="italic" variation="tertiary">
        The input in this fieldset is disabled because of the parent fieldset.
      </Text>
      <TextField label="Test input" />
      <Fieldset legend="Nested fieldset" variation="outlined">
        <Text fontStyle="italic" variation="tertiary">
          This input is also disabled because the fieldset above it is disabled,
          even though its immediate parent fieldset is not disabled.
        </Text>
        <TextField label="Test nested input" />
      </Fieldset>
    </Fieldset>
  );
};

Name attribute

Fieldset supports the [name] attribute. Use the name prop to supply a name for your Fieldset. This can be useful if parsing form controls using the form.elements api

import { Flex, Fieldset, Text } from '@aws-amplify/ui-react';
import { useRef, useEffect, useState } from 'react';

export const NameAttribute = () => {
  const formRef = useRef(null);
  const [fieldsetName, setFieldsetName] = useState('');

  useEffect(() => {
    if (formRef.current) {
      setFieldsetName(formRef.current.elements[0].name);
    }
  }, [setFieldsetName]);
  return (
    <Flex as="form" ref={formRef} direction="column">
      <Fieldset
        legend="Fieldset with a name"
        name="Fieldset #1"
        variation="outlined"
      >
        Fieldset content
      </Fieldset>
      Fieldset name: {fieldsetName}
    </Flex>
  );
};

Styling

Theme

You can customize the appearance of all Fieldset components in your application with a Theme.

Fieldset Theme Source

Some content of the fieldset.

import { Fieldset, ThemeProvider, createTheme } from '@aws-amplify/ui-react';

const theme = createTheme({
  name: 'fieldset-theme',
  tokens: {
    components: {
      fieldset: {
        outlined: {
          borderStyle: 'dashed',
          borderWidth: '2px',
          borderColor: '{colors.primary.20}',
          padding: '{space.large}',
        },
        legend: {
          fontSize: '{fontSizes.large}',
          color: '{colors.primary.80}',
          fontWeight: '400',
        },
      },
    },
  },
});

export const FieldsetThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Fieldset legend="Default fieldset with theming">
      Some content of the fieldset.
    </Fieldset>
  </ThemeProvider>
);

Target classes

Class	Description
`amplify-fieldset`	Top level element that wraps the Fieldset primitive
`amplify-fieldset__legend`	Visual label for the Fieldset primitive

--amplify-components-fieldset-background-color
--amplify-components-fieldset-border-radius
--amplify-components-fieldset-flex-direction
--amplify-components-fieldset-gap
--amplify-components-fieldset-large-gap
--amplify-components-fieldset-legend-color
--amplify-components-fieldset-legend-font-size
--amplify-components-fieldset-legend-font-weight
--amplify-components-fieldset-legend-large-font-size
--amplify-components-fieldset-legend-line-height
--amplify-components-fieldset-legend-small-font-size
--amplify-components-fieldset-outlined-border-color
--amplify-components-fieldset-outlined-border-style
--amplify-components-fieldset-outlined-border-width
--amplify-components-fieldset-outlined-large-padding
--amplify-components-fieldset-outlined-padding
--amplify-components-fieldset-outlined-small-padding
--amplify-components-fieldset-small-gap

Global Styling

To override styling on all Fieldsets, you can set the Amplify CSS variables or use the target classes.

A Fieldset styled with CSS.

/* styles.css */
:root {
  --amplify-components-fieldset-border-radius: 12px;
}
/* OR */
.amplify-fieldset {
  border-radius: 12px;
}

Local styling

To override styling on a specific Fieldset, you can use (in order of increasing specificity): a class selector or style props.

Using a class selector

This is a purple fieldset

/* styles.css */
.purple-fieldset {
  background-color: var(--amplify-colors-purple-10);
  border-color: var(--amplify-colors-purple-60);
}

import './styles.css';

<Fieldset className="purple-fieldset" legend="A purple fieldset">
  This is a purple fieldset
</Fieldset>

Using style props

Fieldset content

import { Fieldset } from '@aws-amplify/ui-react';

export const FieldsetStylePropsExample = () => {
  return (
    <Fieldset
      legend="Fieldset with style props"
      borderColor="teal.60"
      backgroundColor="teal.10"
    >
      Fieldset content
    </Fieldset>
  );
};

Accessibility

ARIA attributes, roles, and other HTML attributes that are passed to Fieldset are passed to the parent DOM element which is a <fieldset>.

Legend

Fieldset outputs a <legend> as the first nested element within the Fieldset. The <legend> element does not currently behave well as a flexbox child in browsers. To allow Fieldset to still operate well as a flex parent, Fieldset duplicates the contents of the legend prop:

the first is output as a VisuallyHidden <legend> which is accessible to screen readers.
The second is output as a visible <div> element set to aria-hidden={true} so that the content is not repeated for screenreaders.

This enables Fieldset to have a legend as the suggested way to accessibly label a fieldset.