Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditionsDisabled checkboxDisabled checked

"use client";

import { useState } from "react";

import { Checkbox } from "@smartacteam/ambient-web/checkbox";

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false);

  return (
    <div className="flex flex-col gap-4">
      <label className="flex items-center gap-2">
        <Checkbox checked={checked} onCheckedChange={setChecked} />
        <span className="text-sm">Accept terms and conditions</span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox disabled />
        <span className="text-sm text-foreground-secondary">
          Disabled checkbox
        </span>
      </label>
      <label className="flex items-center gap-2">
        <Checkbox checked disabled />
        <span className="text-sm text-foreground-secondary">
          Disabled checked
        </span>
      </label>
    </div>
  );
}

Usage

import { Checkbox } from "@smartacteam/ambient-web/checkbox";

<Checkbox />

Examples

With Label

<label className="flex items-center gap-2">
  <Checkbox />
  <span>Accept terms</span>
</label>

Controlled

const [checked, setChecked] = useState(false);
 
<Checkbox checked={checked} onCheckedChange={setChecked} />;