Switch

A switch component.

Source

Installation

npx @rahimstack@latest add switch

Usage

State

Uncontrolled

  • Input type: checkbox, Ref prop: inputRef
  • Value type: "on" | "off"
  • If not required, "off" will be submitted if the switch is not checked.
  • If required, "on" will need to be the value of the checkbox (The switch needs to be checked).

API Reference

const SwitchAnatomy = defineStyleAnatomy({
    root: cva([
        "UI-Switch__root",
        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-colors",
        "disabled:cursor-not-allowed data-[disabled=true]:opacity-50",
        "outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[--ring] focus-visible:ring-offset-1",
        "data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700", // Unchecked
        "data-[state=unchecked]:hover:bg-gray-300 dark:data-[state=unchecked]:hover:bg-gray-600", // Unchecked hover
        "data-[state=checked]:bg-brand", // Checked
        "data-[error=true]:border-red-500", // Checked
    ], {
        variants: {
            size: {
                sm: "h-5 w-9",
                md: "h-6 w-11",
                lg: "h-7 w-14",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    container: cva([
        "UI-Checkbox__container",
        "inline-flex gap-2 items-center",
    ]),
    thumb: cva([
        "UI-Switch__thumb",
        "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform",
        "data-[state=unchecked]:translate-x-1",
    ], {
        variants: {
            size: {
                sm: "h-3 w-3 data-[state=checked]:translate-x-[1.1rem]",
                md: "h-4 w-4 data-[state=checked]:translate-x-[1.4rem]",
                lg: "h-5 w-5 data-[state=checked]:translate-x-[1.9rem]",
            },
        },
        defaultVariants: {
            size: "md",
        },
    }),
    label: cva([
        "UI-Switch__label",
        "relative font-normal",
        "data-[disabled=true]:text-gray-300",
    ]),
})