Fieldset | iTwinUI

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