Using Toggle Group in a Form

[tskuo]

Hi, I am trying to include a toggle group (type = single) inside the form components offered by shadcn-svelte. With the following code, I can see the selected toggle gets updated within the SuperDebug component.

<Form.Fieldset {form} name="answer">
<Form.Legend>Toggle A, B, or C</Form.Legend>
  <ToggleGroup.Root bind:value={$formData.answer} class="flex">
    <Form.Control let:attrs>
      <ToggleGroup.Item value="A" {...attrs}><Form.Label>A</Form.Label></ToggleGroup.Item>
    </Form.Control>
    <Form.Control let:attrs>
      <ToggleGroup.Item value="B" {...attrs}><Form.Label>B</Form.Label></ToggleGroup.Item>
    </Form.Control>
    <Form.Control let:attrs>
      <ToggleGroup.Item value="C" {...attrs}><Form.Label>C</Form.Label></ToggleGroup.Item>
    </Form.Control>
  </ToggleGroup.Root>
  <Form.FieldErrors />
</Form.Fieldset>

However, when I console log the received form data on the page.server.ts side, the form.data.answer is an empty string. I am able to get the other components, such as input, radio group, and textarea, working inside the form. I would really appreciate any pointers or examples to get the toggle group working as well. Thank you!

[michal-weglarz]

I know it's an old question, but in such cases you can use a hidden input, making sure it has a proper name, as hinted here in Superforms docs.

For instance:

<input type="hidden" name="answer" value={$formData.answer} />