RadioGroup

<FormField
            control={form.control}
            name="gender"
            render={({ field }) => (
              <FormItem className="space-y-3">
                <FormLabel>Gender</FormLabel>
                <FormControl>
                  <RadioGroup
                    value={typeof field.value === "string" ? field.value : undefined}
                    onValueChange={field.onChange}
                    className="flex flex-col space-y-1"
                  >
                    <FormItem className="flex items-center space-x-3 space-y-0">
                        <FormControl>
                          <RadioGroupItem id="gender_option_1" value={"Male"} />
                        </FormControl>
                        <FormLabel htmlFor="gender_option_1" className="font-normal">
                          {"Male"}
                        </FormLabel>
                      </FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
                        <FormControl>
                          <RadioGroupItem id="gender_option_2" value={"Female"} />
                        </FormControl>
                        <FormLabel htmlFor="gender_option_2" className="font-normal">
                          {"Female"}
                        </FormLabel>
                      </FormItem>
<FormItem className="flex items-center space-x-3 space-y-0">
                        <FormControl>
                          <RadioGroupItem id="gender_option_3" value={"Other"} />
                        </FormControl>
                        <FormLabel htmlFor="gender_option_3" className="font-normal">
                          {"Other"}
                        </FormLabel>
                      </FormItem>
                  </RadioGroup>
                </FormControl>
                <FormDescription>Select your gender</FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />