Skip to main content

Gender Radio

This field is for single-choice inputs where only one option can be selected from a predefined list. It’s useful for capturing categorical data and ensuring a clear, mutually exclusive response, with validation enforcing that a choice is made.

This example uses the FormikFormBuilder to render. The field is validated using Yup and defined in gender config variable. Check Validation Rules for more detail.

Code Editor


import { Box, Button } from "@mui/joy";
import { Form, Formik } from "formik";
import { FormBuilder, useFormBuilder, InputTypes, type FieldType } from "formik-form-builder";

const GenderRadioButton = () => {
  const gender: FieldType[] = [
      {
          field: "gender",
          type: InputTypes.RADIO,
          initialValue: "",
          groupLabel: "What's your gender?",
          validation: { required: true, message: "Please select your gender"},
          options: [{ label: "Male", value: "Male" }, { label: "Female", value: "Female" }]
      }
  ]

const { initailValues, yupSchemaValidation } = useFormBuilder(gender);
return (
  <Formik
    initialValues={initailValues}
    validationSchema={yupSchemaValidation}
    onSubmit={(values, actions) => {
      console.log(values), alert(JSON.stringify(values, null, 2));
      actions.setSubmitting(false);
    }}
  >
    {({ values }) => (
      <Form>
        <FormBuilder
          data-test="form"
          values={values}
          fields={gender}
          group="form"
        />
        <Box
          width={"100%"}
          display={"flex"}
          justifyContent={"center"}
          alignItems={"center"}
        >
          <Button variant="solid" type="submit">
            Submit
          </Button>
        </Box>
      </Form>
    )}
  </Formik>
);
};

export default GenderRadioButton;