UIVIX - UI Component Library

A smooth toggle switch with 6 visual variants, 3 sizes, optional label, and customizable color.

Import

import { Toggle } from "@igorao79/uivix";

Playground

Enabled

Variant

Size

State

All Variants

Variant: default

Variant: ios

Variant: material

Variant: outline

Variant: glow

Variant: pill

Variant: slim

OFF

Variant: labeled

All Sizes

Usage

const [enabled, setEnabled] = useState(false);

<Toggle
  variant="ios"
  checked={enabled}
  onChange={(e) => setEnabled(e.target.checked)}
  label="Dark mode"
  size="md"
/>

Props

Prop	Type	Default	Description
variant	"default" \| "ios" \| "material" \| "outline" \| "glow" \| "pill"	"default"	Visual style variant of the toggle
size	"sm" \| "md" \| "lg"	"md"	Size of the toggle switch
color	string	"#8b5cf6"	Active background color
label	string	-	Label text displayed beside the toggle
checked	boolean	false	Whether the toggle is on
disabled	boolean	false	Whether the toggle is disabled
onChange	(e: ChangeEvent) => void	-	Called when the toggle value changes
className	string	-	Additional CSS classes