diff --git a/web/src/components/inputs/common.tsx b/web/src/components/inputs/common.tsx index 5762739..f40072b 100644 --- a/web/src/components/inputs/common.tsx +++ b/web/src/components/inputs/common.tsx @@ -1,4 +1,5 @@ import { Field, FieldProps } from "formik"; +import { classNames } from "../../utils"; interface ErrorFieldProps { name: string; @@ -19,12 +20,14 @@ interface CheckboxFieldProps { name: string; label: string; sublabel?: string; + disabled?: boolean; } const CheckboxField = ({ name, label, - sublabel + sublabel, + disabled }: CheckboxFieldProps) => (
@@ -32,7 +35,8 @@ const CheckboxField = ({ id={name} name={name} type="checkbox" - className="focus:ring-bkue-500 h-4 w-4 text-blue-600 border-gray-300 rounded" + className={classNames("focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded", disabled ? "bg-gray-200" : "")} + disabled={disabled} />
diff --git a/web/src/components/inputs/input.tsx b/web/src/components/inputs/input.tsx index ecf6c90..e4b1d7a 100644 --- a/web/src/components/inputs/input.tsx +++ b/web/src/components/inputs/input.tsx @@ -2,6 +2,7 @@ import { Field, FieldProps } from "formik"; import { classNames } from "../../utils"; import { EyeIcon, EyeSlashIcon } from "@heroicons/react/24/solid"; import { useToggle } from "../../hooks/hooks"; +import { log } from "util"; type COL_WIDTHS = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; @@ -204,6 +205,9 @@ interface NumberFieldProps { placeholder?: string; step?: number; disabled?: boolean; + required?: boolean; + min?: number; + max?: number; } export const NumberField = ({ @@ -211,7 +215,10 @@ export const NumberField = ({ label, placeholder, step, - disabled + min, + max, + disabled, + required }: NumberFieldProps) => (