Note: This project is still in development and has not been publicly released. Coming soon.
Docs
Switch Input
Switch Input

A customizable toggle switch with Zod validation, animations, and extended functionality.

13 views
3 downloads
Loading...

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"
2
3import { SwitchInput } from "@/registry/inputs/switch-input"
4
5export function Component() {
6 return (
7 <SwitchInput
8 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

PropTypeDefaultDescription
labelstring-Label text for the switch (required)
namestring-Form field name for submission (required)
descriptionstringundefinedDescription text below the switch
hintstringundefinedHint text below the switch
errorstringundefinedError message to display
requiredbooleanfalseWhether the field is required
pendingbooleanfalseWhether the field is in a loading state
defaultCheckedbooleanfalseDefault checked state (uncontrolled)
checkedbooleanundefinedControlled checked state
disabledbooleanfalseWhether the switch is disabled
idstringnameID for the switch element
variant"pill" | "rectangular""rectangular"Switch shape variant
size"default" | "large""default"Switch size (24px / 30px height)
activeColorstringundefinedCustom CSS color for active state
extendedClickAreabooleanfalseExtends clickable area for better mobile UX
labelVariant"default" | "muted""default"Label text styling variant
containerClassNamestring""CSS classes for the container
switchClassNamestring""CSS classes for the switch
labelClassNamestring""CSS classes for the label
schemaZodType<boolean>undefinedZod schema for validation
onValidate(isValid: boolean, value: boolean, error?: string) => voidundefinedValidation callback
onCheckedChange(checked: boolean) => voidundefinedCallback when state changes

Examples

Pill Variant

Rounded pill-shaped switch with smooth corner transitions.

Loading...

Standalone Switch

Switch without label for compact layouts and custom implementations.

Loading...

Custom Colors

Switches with custom active colors for brand consistency.

Loading...

Size Variants

Different switch sizes for various interface contexts.

Loading...