Checkbox

1import { Checkbox } from "@ngrok/mantle/checkbox";2import { Label } from "@ngrok/mantle/label";3 4<Label htmlFor="terms" className="flex items-center gap-2">5	<Checkbox name="terms" id="terms" />6	Accept terms and conditions7</Label>8<Label htmlFor="unchecked" className="flex items-center gap-2">9	<Checkbox id="unchecked" name="unchecked" checked={false} readOnly />10	Unchecked11</Label>12<Label htmlFor="checked" className="flex items-center gap-2">13	<Checkbox id="checked" name="checked" checked readOnly />14	Checked15</Label>16<Label htmlFor="indeterminate" className="flex items-center gap-2">17	<Checkbox id="indeterminate" name="indeterminate" defaultChecked="indeterminate" readOnly />18	Indeterminate19</Label>

1import { Button } from "@ngrok/mantle/button";2import { Label } from "@ngrok/mantle/label";3import { Checkbox } from "@ngrok/mantle/checkbox";4import { useForm } from "@tanstack/react-form";5import { z } from "zod";6 7const formSchema = z.object({8	acceptedTermsAndConditions: z9		.boolean()10		.refine((value) => value, "You must accept the terms and conditions."),11});12 13function FormExample() {14	const form = useForm({15		defaultValues: {16			acceptedTermsAndConditions: false,17		},18		validators: {19			onSubmit: formSchema,20		},21		onSubmit: ({ value }) => {22			// Handle form submission here23		},24	});25 26	return (27		<form28			className="space-y-4"29			onSubmit={(event) => {30				event.preventDefault();31				event.stopPropagation();32				void form.handleSubmit();33			}}34		>35			<div className="space-y-1">36				<form.Field name="acceptedTermsAndConditions">37					{(field) => (38						<Label htmlFor={field.name} className="flex items-center gap-2">39							<Checkbox40								name={field.name}41								id={field.name}42								checked={field.state.value}43								onBlur={field.handleBlur}44								onChange={(event) => field.handleChange(event.target.checked)}45								validation={field.state.meta.errors.length > 0 && "error"}46							/>47							Accept terms and conditions48						</Label>49					)}50				</form.Field>51			</div>52			<form.Subscribe selector={(state) => state.isDirty}>53				{(isDirty) => (54					<Button type="submit" appearance="filled" disabled={!isDirty}>55						Submit56					</Button>57				)}58			</form.Subscribe>59		</form>60	);61}