Components
Loading preview...
A control that toggles between two options, checked or unchecked.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/checkboximport React, { useState } from "react";
import { Checkbox } from "@/components/ui/checkbox";
export const Demo = () => {
const [checked, setChecked] = useState(false);
return (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<div className="font-bold text-xl dark:text-white">Default</div>
<Checkbox checked={checked} onChange={(): void => setChecked((value) => !value)}>
Option 1
</Checkbox>
</div>
<div className="flex flex-col gap-2">
<div className="font-bold text-xl dark:text-white">Disabled</div>
<Checkbox disabled>Disabled</Checkbox>
<Checkbox checked disabled>
Disabled Checked
</Checkbox>
<Checkbox disabled indeterminate>
Disabled Indeterminate
</Checkbox>
</div>
<div className="flex flex-col gap-2">
<div className="font-bold text-xl dark:text-white">Indeterminate</div>
<Checkbox indeterminate>Option 1</Checkbox>
</div>
</div>
);
};
export const Default = () => {
const [checked, setChecked] = useState(false);
return (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<div className="font-bold text-xl dark:text-white">Default</div>
<Checkbox checked={checked} onChange={(): void => setChecked((b) => !b)}>
Option 1
</Checkbox>
</div>
</div>
)
}
export const Disabled = () => (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<div className="font-bold text-xl dark:text-white">Disabled</div>
<Checkbox disabled>Disabled</Checkbox>
<Checkbox checked disabled>
Disabled Checked
</Checkbox>
<Checkbox disabled indeterminate>
Disabled Indeterminate
</Checkbox>
</div>
</div>
)
export const Indeterminate = () => (
<div className="flex flex-col gap-8">
<div className="flex flex-col gap-2">
<div className="font-bold text-xl dark:text-white">Indeterminate</div>
<Checkbox indeterminate>Option 1</Checkbox>
</div>
</div>
)