Checkbox

I agree to the workspace terms

Required before creating an account.

Accept the terms to continue.

"use client";

import { useState } from "react";

import { CheckboxField } from "@/components/matos-ui/checkbox";

export function CheckboxDemo() {
  const [accepted, setAccepted] = useState(false);

  return (
    <div className="mx-auto w-full max-w-sm">
      <CheckboxField
        label="I agree to the workspace terms"
        description="Required before creating an account."
        checked={accepted}
        onCheckedChange={setAccepted}
        error={accepted ? undefined : "Accept the terms to continue."}
        required
      />
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/checkbox.json

Usage

import { CheckboxField } from "@/components/matos-ui/checkbox"

<CheckboxField
  label="I agree to the terms"
  checked={field.value}
  onCheckedChange={field.onChange}
  error={errors.terms?.message}
/>

Checkbox wraps the Base UI primitive and CheckboxField adds label, supporting description, and animated validation output.