Function: SwitchField()

SwitchField<TFieldValues>(props): Element

A switch/toggle field component that integrates React Hook Form with HeroUI Switch.

This component provides a type-safe switch field with validation support, error handling, and accessibility features. The field value is a boolean.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

SwitchFieldProps<TFieldValues>

The switch field props

Returns

Element

The rendered switch field component

Examples


import { ZodForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { z } from "zod";
 
const schema = z.object({
  notifications: z.boolean(),
  darkMode: z.boolean().default(false),
});
 
function MyForm() {
  return (
    <ZodForm
      config={{
        schema,
        fields: [
          FormFieldHelpers.switch("notifications", "Enable notifications", "Receive email notifications"),
          FormFieldHelpers.switch("darkMode", "Dark mode"),
        ],
      }}
      onSubmit={(data) => console.log(data)}
    />
  );
}


// With custom styling
<SwitchField
  control={form.control}
  name="notifications"
  label="Enable notifications"
  switchProps={{
    color: "success",
    size: "lg",
  }}
/>