Components
Loading preview...
A control allowing the user to toggle between checked and not checked.
npx shadcn@latest add https://21st.dev/r/coss.com/checkbox"use client";
import type { FormEvent } from "react";
import { useState } from "react";
import { Checkbox } from "@/components/ui/component";
export default function Particle() {
const [loading, setLoading] = useState(false);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
const accepted = formData.get("terms");
alert(`Terms: ${accepted}`);
};
return (
<div className="flex items-center justify-center w-full min-h-screen bg-background p-8">
<form className="flex flex-col gap-4 w-auto" onSubmit={onSubmit}>
<label className="flex items-center gap-2 text-sm font-medium cursor-pointer">
<Checkbox defaultChecked name="terms" value="yes" />
Accept terms and conditions
</label>
<button
type="submit"
disabled={loading}
className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
>
{loading ? (
<svg
className="size-4 animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
) : (
"Submit"
)}
</button>
</form>
</div>
);
}