CODEWITHSUNDEEP
radix-ui
user3357926
user3357926

Reputation: 1137

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

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?

Upvotes: 3

Views: 2792

Answers (1)

Ahmed Abdelbaset
Ahmed Abdelbaset

Reputation: 4926

Add name attribute to your select:

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

Upvotes: 2

Related Questions