Components
Loading preview...
Displays a boolean value.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/toggle-1import { useState } from "react";
import { Toggle } from "@/components/ui/toggle-1";
const LockClosedSmall = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.5 6V7H6.5V6C6.5 5.17157 7.17157 4.5 8 4.5C8.82843 4.5 9.5 5.17157 9.5 6ZM5 7V6C5 4.34315 6.34315 3 8 3C9.65685 3 11 4.34315 11 6V7H12V11.5C12 12.3284 11.3284 13 10.5 13H5.5C4.67157 13 4 12.3284 4 11.5V7H5Z"
/>
</svg>
);
const LockOpenSmall = () => (
<svg
height="16"
strokeLinejoin="round"
viewBox="0 0 16 16"
width="16"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M13.5 7V6C13.5 5.17157 12.8284 4.5 12 4.5C11.1716 4.5 10.5 5.17157 10.5 6V7H12V8.5V9V11.5C12 12.3284 11.3284 13 10.5 13H5.5C4.67157 13 4 12.3284 4 11.5V7H9V6C9 4.34315 10.3431 3 12 3C13.6569 3 15 4.34315 15 6V7H13.5Z"
/>
</svg>
);
export default function DefaultDemo() {
const [checked5, setChecked5] = useState(true);
return (
<div className="flex flex-col gap-2 w-3/4">
<Toggle
aria-label="Enable Firewall"
checked={checked5}
color="amber"
icon={{
checked: <LockClosedSmall />,
unchecked: <LockOpenSmall />
}}
onChange={(): void => setChecked5(!checked5)}
/>
<Toggle
aria-label="Enable Firewall"
checked={checked5}
color="red"
icon={{
checked: <LockClosedSmall />,
unchecked: <LockOpenSmall />
}}
onChange={(): void => setChecked5(!checked5)}
/>
<Toggle
aria-label="Enable Firewall"
checked={checked5}
color="amber"
icon={{
checked: <LockClosedSmall />,
unchecked: <LockOpenSmall />
}}
onChange={(): void => setChecked5(!checked5)}
size="large"
/>
<Toggle
aria-label="Enable Firewall"
checked={checked5}
color="red"
icon={{
checked: <LockClosedSmall />,
unchecked: <LockOpenSmall />
}}
onChange={(): void => setChecked5(!checked5)}
size="large"
/>
</div>
);
}