Elanor

Fieldset

Last updated

Groups related controls, such as a set of checkboxes or radios, under one visible label. For a single control, use Field.

Notify me about
Code
demo.tsx 
import {Checkbox, Fieldset, SelectionControlAndLabel, Stack} from '@earendil-works/elanor-react';

const topics = ['Deployments', 'Incidents', 'Billing'];

export default function FieldsetDemo() {
  return (
    <Fieldset.Root render={<Checkbox.Group defaultValue={['Incidents']} />}>
      <Fieldset.Legend>Notify me about</Fieldset.Legend>
      <Stack gap="small">
        {topics.map((topic) => (
          <SelectionControlAndLabel
            key={topic}
            control={
              <Checkbox.Root value={topic}>
                <Checkbox.Indicator />
              </Checkbox.Root>
            }
          >
            {topic}
          </SelectionControlAndLabel>
        ))}
      </Stack>
    </Fieldset.Root>
  );
}

Usage

import {Checkbox, Fieldset, SelectionControlAndLabel} from '@earendil-works/elanor-react';

<Fieldset.Root render={<Checkbox.Group />}>
  <Fieldset.Legend>Notify me about</Fieldset.Legend>
  <SelectionControlAndLabel
    control={
      <Checkbox.Root value="incidents">
        <Checkbox.Indicator />
      </Checkbox.Root>
    }
  >
    Incidents
  </SelectionControlAndLabel>
</Fieldset.Root>;

Fieldset.Legend names the group for assistive technology. Use render to make the fieldset a Checkbox or Radio group.

Validation

Wrap the fieldset in Field.Root with a name to submit the group’s value with a Form and validate it. The demo requires at least one channel.

Alert channels
Code
validation.tsx 
import {
  Button,
  Checkbox,
  Field,
  Fieldset,
  Form,
  SelectionControlAndLabel,
  Stack,
} from '@earendil-works/elanor-react';

const channels = ['Email', 'Slack', 'SMS'];

export default function FieldsetValidation() {
  return (
    <Form>
      <Stack gap="medium">
        <Field.Root
          name="channels"
          validate={(value) =>
            Array.isArray(value) && value.length > 0 ? null : 'Choose at least one channel.'
          }
        >
          <Fieldset.Root render={<Checkbox.Group defaultValue={[]} />}>
            <Fieldset.Legend>Alert channels</Fieldset.Legend>
            <Stack gap="small">
              {channels.map((channel) => (
                <SelectionControlAndLabel
                  key={channel}
                  control={
                    <Checkbox.Root value={channel}>
                      <Checkbox.Indicator />
                    </Checkbox.Root>
                  }
                >
                  {channel}
                </SelectionControlAndLabel>
              ))}
            </Stack>
          </Fieldset.Root>
          <Field.Error />
        </Field.Root>
        <Button type="submit">Save</Button>
      </Stack>
    </Form>
  );
}

Disabled

disabled disables every control in the fieldset.

Region
Code
disabled.tsx 
import {Fieldset, Radio, SelectionControlAndLabel, Stack} from '@earendil-works/elanor-react';

const regions = ['Frankfurt', 'Virginia', 'Singapore'];

export default function FieldsetDisabled() {
  return (
    <Fieldset.Root disabled render={<Radio.Group defaultValue="Frankfurt" />}>
      <Fieldset.Legend>Region</Fieldset.Legend>
      <Stack gap="small">
        {regions.map((region) => (
          <SelectionControlAndLabel
            key={region}
            control={
              <Radio.Root value={region}>
                <Radio.Indicator />
              </Radio.Root>
            }
          >
            {region}
          </SelectionControlAndLabel>
        ))}
      </Stack>
    </Fieldset.Root>
  );
}

API

Fieldset.Root

Accepts Base UI Fieldset.Root props.

Fieldset.Legend

Accepts Base UI Fieldset.Legend props.

↑↓to select↵to openEscto close