Fieldset

.fieldset styles HTML <fieldset> elements.

Applicable Elements

• fieldset

React component Advanced

<Fieldset/> renders a single <fieldset class="fieldset" /> element.

<Fieldset/> passes its error status to child “FORMS” components, just as an HTML <fieldset> passes its disabled state to its descendants.

import { useState } from "react";
import { Fieldset, HelperText, Label, Select } from "sashimi-ui/react";

export default function FieldsetUsage() {
  const [neta, setNeta] = useState("");

  return (
    <Fieldset
      // Once the error is set, all child form components will get .error class
      error={neta === "pudding" ? "Pudding is not a neta" : undefined}
      style={{ width: 320 }}
    >
      <Label htmlFor="neta">Neta</Label>
      <Select
        id="neta"
        name="neta"
        value={neta}
        onChange={(event) => setNeta(event.target.value)}
      >
        <option value="">Choose a neta</option>
        <option value="hamachi">Hamachi</option>
        <option value="sanma">Sanma</option>
        <option value="pudding">Pudding</option>
      </Select>
      <HelperText>Select Pudding to show an error.</HelperText>
    </Fieldset>
  );
}