Switch instead of Checkbox for zodBoolean

[DrummyFloyd]

i'm migrating from the standalone version

and 'im wondering how can i achieve this old (custom) behaviour for boolean on zod instance

on my standalone auto-form cnfig.ts

i've set this

/**
 * Define handlers for specific Zod types.
 * You can expand this object to support more types.
 */
export const DEFAULT_ZOD_HANDLERS: {
  [key: string]: keyof typeof INPUT_COMPONENTS;
} = {
  ZodBoolean: "switch", // change default here
  ZodDate: "date",
  ZodEnum: "select",
  ZodNativeEnum: "select",
  ZodNumber: "number",
};

how can i achieve to this easily with the new version , =)

EDIT:

i tried this but seems to no work

z.object({
  name: z.string(),
  age: z.coerce.number(),
  isHuman: z.boolean().superRefine(
    fieldConfig({
      fieldType: "switch",
    })
  )
});

[vantezzen]

The new version currently doesn't ship with a switch component, however you can define a custom formComponent in the AutoForm component (https://autoform.vantezzen.io/docs/react/customization#custom-field-types) or for shadcn alternatively add it to your component directly (

autoform/packages/shadcn/src/components/ui/autoform/AutoForm.tsx

Lines 30 to 36 in 351fad3

	export const ShadcnAutoFormFieldComponents = {
	string: StringField,
	number: NumberField,
	boolean: BooleanField,
	date: DateField,
	select: SelectField,
	} as const;

)

[rPr3v0t]

You can use these for shadcn, it's working :

 import React, { useState, useEffect } from "react";
import { Switch } from "@/components/ui";
import { AutoFormFieldProps } from "@autoform/react";
import { Label } from "../../label";

export const SwitchField: React.FC<AutoFormFieldProps> = ({
  field,
  label,
  id,
  inputProps,
  value,
}) => {
  const { key, ...props } = inputProps;
  const [isChecked, setIsChecked] = useState<boolean>(value);

  useEffect(() => {
    setIsChecked(value);
  }, [value]);

  return (
    <div className="flex items-center space-x-2">
      <Switch
        id={id}
        checked={isChecked}
        onCheckedChange={(change: boolean) => {
          setIsChecked(change);
          props.onChange({ target: { name: field.key, value: change } });
        }}
      />
      <Label htmlFor={id}>
        {label}
        {field.required && <span className="text-destructive"> *</span>}
      </Label>
    </div>
  );
};

[DrummyFloyd]

i'm still on migration to new libs, thank for those replies =) help me alot !