function ControlledGroup() {
  const [selected, setSelected] = useState(['option1']);
 
  return (
    <CheckboxGroup
      value={selected}
      onChange={setSelected}
    >
      <Checkbox value="option1">Option 1</Checkbox>
      <Checkbox value="option2">Option 2</Checkbox>
    </CheckboxGroup>
  );
}

function FormExample() {
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    console.log(formData.getAll('preferences'));
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <CheckboxGroup
        name="preferences"
        defaultValue={['email']}
      >
        <Checkbox value="email">Email Updates</Checkbox>
        <Checkbox value="newsletter">Newsletter</Checkbox>
      </CheckboxGroup>
      <button type="submit">Submit</button>
    </form>
  );
}