Radix Primitives How to submit value of Select component in Form component?

Question

I'm trying create a form using Radix Primities and submit the data to Next.js 13 server action like this,

<Form.Root action={create}>
  <Form.Field name="gender">
    <Form.Label>Gender</Form.Label>
    <Form.Control type="select" asChild>
      <select name="gender">
        <option value="m">Male</option>
        <option value="f">Female</option>
      </select>
    </Form.Control>
  </Form.Field>
  <Form.Submit>OK</Form.Submit>
</Form.Root>

the above is working correctly and I can receive the form data in my server action successfully,

export const create = (formData: FormData) => {
  // log the data in server action
  console.log(formData.get("gender"));
};

but I also want the accessibility and feactures from Select component so I thought I can insert the Select component like this,

<Form.Root action={create}>
  <Form.Field name="gender">
    <Form.Label>Gender</Form.Label>
    <Form.Control type="select" asChild>
      <Select.Root>
        ...
      </Select.Root>
    </Form.Control>
  </Form.Field>
  <Form.Submit>OK</Form.Submit>
</Form.Root>

but the server action is not able to get the value of gender. May I know how to use Select inside of Form component?

Answer 1

Add name attribute to your select:

<Select.Root name="gender">
  ...
</Select.Root>