A customizable toggle switch with Zod validation, animations, and extended functionality.
Receive notifications about account activity and updates
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
"use client"
import { SwitchInput } from "@/registry/inputs/switch-input"
export function Component() {
return (
<SwitchInput
label="Enable notifications"
name="notifications"
description="Receive email updates about your account"
onCheckedChange={(checked) => console.log("Toggle:", checked)}
/>
)
}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.
Pill variant has fully rounded corners
Standalone Switch
Switch without label for compact layouts and custom implementations.
Toggle to see alert functionality
Custom Colors
Switches with custom active colors for brand consistency.
Using custom red color
Using custom green color
Using custom purple color
Size Variants
Different switch sizes for various interface contexts.
Standard switch size (24px height)
Large switch size (30px height)
