Fieldset

Groups and labels related form fields.

It implements the <fieldset> element.

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import 'device-agnostic-ui/public/components/Fieldset.css';

Props

Examples

Deep import.
import Fieldset from 'device-agnostic-ui/public/components/Fieldset.js';
Deep require.
const Fieldset = require('device-agnostic-ui/public/components/Fieldset.js');
Index import. Convenient, but technically inferior to a deep import.
import { Fieldset } from 'device-agnostic-ui';
Index require. Convenient, but technically inferior to a deep require.
const { Fieldset } = require('device-agnostic-ui');
Grouped checkboxes.
import { Fieldset, Textbox } from 'device-agnostic-ui';

const result = (
  <Fieldset legend="Options">
    <Toggle
      inputProps={{
        type: 'radio',
        name: 'options',
        value: 'a',
        defaultChecked: true,
      }}
    >
      Label A
    </Toggle>
    <Toggle
      inputProps={{
        type: 'radio',
        name: 'options',
        value: 'b',
      }}
    >
      Label B
    </Toggle>
  </Fieldset>
);
Options

Tags