To-do List

This checkbox group is suited for tasks or checklist-style inputs where users can mark multiple actions. It works well for to-do lists, progress tracking, or any form that needs multiple step confirmations. The column layout ensures clarity, and MUI props handle the styling.

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

Code Editor

import { Box, Button, Typography } from "@mui/joy";
import { Formik, Form } from "formik";
import { FormBuilder,InputTypes,useFormBuilder, type FieldType, } from "@mjfy/core";
const ToDoExample = () => {
const checklistFields: FieldType[] = [
  {
    field: "tasks",
    type: InputTypes.CHECKBOX,
    initialValue: [],
    direction: "column",
    groupLabel: "Tasks to complete:",
    options: [
      { label: "Check email", value: "email" },
      { label: "Write code", value: "code" },
      { label: "Attend stand-up", value: "standup" },
      { label: "Review PRs", value: "review" },
    ],
    muiProps: { variant: "outlined" },
  },
];

const { initailValues, yupSchemaValidation } =
  useFormBuilder(checklistFields);

return (
  <Formik
    initialValues={initailValues}
    validationSchema={yupSchemaValidation}
    onSubmit={(values, actions) => {
      console.log(values);
      alert("Completed Tasks: " + JSON.stringify(values.tasks, null, 2));
      actions.setSubmitting(false);
    }}
  >
    {({ values }) => (
      <Form>
        <Typography level="h4" gutterBottom>
          Checklist Example Usage
        </Typography>

        <FormBuilder
          group="form"
          fields={checklistFields}
          values={values}
          data-test="form"
        />

        <Box
          width={"100%"}
          display={"flex"}
          justifyContent={"center"}
          alignItems={"center"}
        >
          <Button variant="solid" type="submit">
            Completed
          </Button>
        </Box>
      </Form>
    )}
  </Formik>
);
};

export default ToDoExample;