Skip to Content

Fieldset

A fieldset is a container grouping interactive components together.

import * as React from 'react';
import {
  Fieldset,
  InputGroup,
  Radio,
  ToggleSwitch,
} from '@itwin/itwinui-react';

export default () => {
  return (
    <Fieldset legend='General Settings' className='demo-fieldset'>
      <InputGroup label='Color Theme'>
        <Radio name='choice' value='option1' label={'Light'} />
        <Radio name='choice' value='option2' label={'Dark'} />
        <Radio name='choice' value='option3' label={'Match device'} />
      </InputGroup>

      <InputGroup>
        <ToggleSwitch label='Share crash logs' />
        <ToggleSwitch disabled label='Advanced settings' />
      </InputGroup>
    </Fieldset>
  );
};

The fieldset is a container meant to group components that apply to a common target. They are also useful in forms where interactive elements require to be split into categories. Fieldsets are flexible and can contain a wide variety of components.

Usage

  • Components should be stacked, and not displayed side to side, unless necessary.
  • Disabled and active components can co-exist within a fieldset in active state.
  • If all components inside a fieldset are disabled, the fieldset as a whole should be disabled.
import * as React from 'react';
import { Fieldset, LabeledInput } from '@itwin/itwinui-react';

export default () => {
  return (
    <Fieldset legend='Disabled Fieldset' disabled className='demo-fieldset'>
      <LabeledInput label='Full Name' placeholder='Enter full name' />
      <LabeledInput label='Address' placeholder='Enter address' />
    </Fieldset>
  );
};

Props

Prop Description Default
legend
The caption or title for the fieldset.
ReactNode
as
"symbol" | "object" | "fieldset" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | ... 159 more ... | FunctionComponent<...>