A customizable toggle switch with Zod validation, animations, and extended functionality.
Overview
The Switch Input component provides an elegant toggle interface with smooth animations and extensive customization options, essential for boolean settings and preferences. It features multiple variants, custom colors, extended click areas for mobile usability, and comprehensive validation support. Perfect for feature toggles, notification settings, and any scenario requiring clear on/off state management with excellent user experience.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/switch-input.json
Usage
1"use client"23import { SwitchInput } from "@/registry/inputs/switch-input"45export function Component() {6 return (7 <SwitchInput8 label="Enable notifications"9 name="notifications"10 description="Receive email updates about your account"11 onCheckedChange={(checked) => console.log("Toggle:", checked)}12 />13 )14}
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Label text for the switch (required) |
name | string | - | Form field name for submission (required) |
description | string | undefined | Description text below the switch |
hint | string | undefined | Hint text below the switch |
error | string | undefined | Error message to display |
required | boolean | false | Whether the field is required |
pending | boolean | false | Whether the field is in a loading state |
defaultChecked | boolean | false | Default checked state (uncontrolled) |
checked | boolean | undefined | Controlled checked state |
disabled | boolean | false | Whether the switch is disabled |
id | string | name | ID for the switch element |
variant | "pill" | "rectangular" | "rectangular" | Switch shape variant |
size | "default" | "large" | "default" | Switch size (24px / 30px height) |
activeColor | string | undefined | Custom CSS color for active state |
extendedClickArea | boolean | false | Extends clickable area for better mobile UX |
labelVariant | "default" | "muted" | "default" | Label text styling variant |
containerClassName | string | "" | CSS classes for the container |
switchClassName | string | "" | CSS classes for the switch |
labelClassName | string | "" | CSS classes for the label |
schema | ZodType<boolean> | undefined | Zod schema for validation |
onValidate | (isValid: boolean, value: boolean, error?: string) => void | undefined | Validation callback |
onCheckedChange | (checked: boolean) => void | undefined | Callback when state changes |
Examples
Pill Variant
Rounded pill-shaped switch with smooth corner transitions.
Standalone Switch
Switch without label for compact layouts and custom implementations.
Custom Colors
Switches with custom active colors for brand consistency.
Size Variants
Different switch sizes for various interface contexts.
