Gender Selection
The Gender Select component provides a simple dropdown for users to indicate their gender. This helps in personalizing user experience and collecting demographic information when required.
When to Use
- During user registration to capture basic profile details.
- In surveys or feedback forms where demographic data is needed.
- In profile update forms for user preferences.
This example uses the FormikFormBuilder
to render a gender select field for selecting a user’s gender. The field is validated using Yup and defined in the genderField
config variable. Check Validation Rules for more detail.
Live Demo
Live Demo
Code Editor
import { Box, Button } from "@mui/joy"; import { Formik, Form } from "formik"; import { FormBuilder, useFormBuilder } from "formik-form-builder"; function GenderSelect() { const genderField: FieldType[] = [ { field: "gender", type: InputTypes.SELECT, label: "Gender", placeholder: "Select your gender", options: [ { label: "Male", value: "male" }, { label: "Female", value: "female" }, { label: "Other", value: "other" }, ], validation: { required: true, message: "Please select a gender", }, helperText: "Choose your gender from the dropdown", muiProps: { variant: "outlined" //sx: { width: "300px" }, }, gridProps: { xs: 12 }, }, ] const { initailValues, yupSchemaValidation } = useFormBuilder(genderField); return ( <Formik initialValues={initailValues} validationSchema={yupSchemaValidation} onSubmit={(values, actions) => { console.log(values); alert(JSON.stringify(values, null, 2)); actions.setSubmitting(false); }} > {({ values }) => ( <Form> <FormBuilder group="form" values={values} data-test="form" fields={genderField} /> <Box width="100%" display="flex" justifyContent="center" alignItems="center" mt={2} > <Button variant="solid" type="submit"> Continue </Button> </Box> </Form> )} </Formik> ); }; export default GenderSelect;