FieldGroup

import { useState } from "react";
import { FieldGroup, TextField, Toggle, VStack } from "@/ohmygui";

export default function Example() {
  const [disabled, setDisabled] = useState(false);

  return (
    <VStack gap="md" align="stretch">
      <Toggle label="Disable this fieldset" checked={disabled} onChange={(event) => setDisabled(event.currentTarget.checked)} />
      <FieldGroup
        legend="Project details"
        hint="Fields in this group share one helpful description."
        disabled={disabled}
      >
        <TextField label="Name" defaultValue="Spring garden" required />
        <TextField label="Description" placeholder="Add a short summary…" />
      </FieldGroup>
    </VStack>
  );
}