Form Switch

Switch connected to Form context with server validation errors.

Installation

bash

pnpm dlx shadcn@latest add @cs/form-switch

tsx

import { FormSwitch } from "@/components/cs/form-switch"

tsx

<FormSwitch name="enabled" />

Switch connected to Form context that displays server validation errors.

Name	Type	Default	Description
className	string \| (((state: SwitchRootState) => string \| undefined) & string) \| undefined	-	CSS class applied to the element, or a function that returns a class based on the component's state. Classes for the switch control.
color	"default" \| "green" \| "red" \| "dark" \| "yellow" \| "orange" \| null \| undefined	-	Controls the checked switch color.
description	string \| undefined	-	Helper text displayed below the label.
error	string \| null \| undefined	-	Validation error message.
label	string \| undefined	-	Switch label.
name *	string	-	Form field name used for submission and validation errors.
orientation	"vertical" \| "horizontal" \| "responsive" \| null \| undefined	-	Layout of the switch control and its text.
size	"default" \| "sm" \| undefined	-	-
switchClassName	string \| undefined	-	Additional class name for the field wrapper.