Fieldset

Fieldset groups related form controls together and provides context to its children and input elements.

Multipart component to be used for grouping related form controls together. It is similar to FormControl. Built on top of Chakra UI Fieldset.

It has four components:

Fieldset: Root wrapper component that provides context and functionality for its children. Renders a <fieldset> element.
FieldsetLegend: Label of a form section. Renders a <legend> element.
FieldsetHelperText: Message that tells users more details about the form section.
FieldsetErrorText: Message that shows up when an error occurs. Will only show when the property isInvalid in Fieldset is true.

Fieldset provides form element state context to its children. Mainly isInvalid and isDisabled. These props passed to Fieldset will cascade across all related components.

Base example

import {
  Fieldset,
  FieldsetHelperText,
  FieldsetLegend,
  FormControl,
  FormLabel,
  Input,
} from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Fieldset w="200px">
      <FieldsetLegend>Contact details</FieldsetLegend>
      <FieldsetHelperText>We will only use this to contact you about your order.</FieldsetHelperText>
      <FormControl>
        <FormLabel>Email</FormLabel>
        <Input type="email" />
      </FormControl>
      <FormControl>
        <FormLabel>Phone number</FormLabel>
        <Input type="tel" />
      </FormControl>
    </Fieldset>
  );
}

`isInvalid`

When isInvalid is true the form input will appear with error styles and FieldsetErrorText will be made visible.

If you render FieldsetErrorText and isInvalid is false or undefined, the element won’t be visible. Meaning there is no need to render it conditionally yourself.

import {
  Fieldset,
  FieldsetErrorText,
  FieldsetLegend,
  Radio,
  RadioGroup,
  Text,
  ThemeColor,
  ThemeSpace,
} from "@caspeco/casper-ui-library";
import { useState } from "react";

export default function Demo() {
  const [selection, setSelection] = useState<string>();
  const sizes = ["Small", "Medium", "Large"];
  return (
    <Fieldset isInvalid={!selection} w="200px">
      <FieldsetLegend display="flex" gap={ThemeSpace.XSmall}>
        <Text>Size</Text>
        <Text color={ThemeColor.Error}>*</Text>
      </FieldsetLegend>
      <RadioGroup
        variant="addon"
        name="size-selection"
        isRequired
        onValueChange={(details) => setSelection(details.value ?? "")}
      >
        {sizes.map((size) => (
          <Radio key={size} value={size}>
            {size}
          </Radio>
        ))}
      </RadioGroup>
      <FieldsetErrorText>You must select a size</FieldsetErrorText>
    </Fieldset>
  );
}

`isDisabled`

Input elements becomes non interactive and disabled-styling is applied.

import { Fieldset, FieldsetHelperText, FieldsetLegend, Radio, RadioGroup } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Fieldset w="200px" isDisabled>
      <FieldsetLegend>Soda size</FieldsetLegend>
      <RadioGroup>
        <Radio value="sm">Small</Radio>
        <Radio value="md">Medium</Radio>
        <Radio value="lg">Large</Radio>
      </RadioGroup>
      <FieldsetHelperText>The sodas are currently not in stock.</FieldsetHelperText>
    </Fieldset>
  );
}