2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:Tc18,"use client"; import { MotionConfig, motion } from "motion/react"; import { Checkbox as CheckboxPrimitive } from "radix-ui"; import { useCallback, useState, type ComponentProps } from "react"; import { cn } from "@/lib/utils"; const SIZES = { sm: "size-4", md: "size-[18px]", lg: "size-5" } as const; type Checked = boolean | "indeterminate"; export interface CheckboxProps extends ComponentProps { size?: keyof typeof SIZES; /** square (default) or circle. */ shape?: "square" | "circle"; } export function Checkbox({ size = "md", shape = "square", checked: checkedProp, defaultChecked = false, onCheckedChange, className, ...props }: CheckboxProps) { const [uncontrolled, setUncontrolled] = useState(defaultChecked); const checked = checkedProp ?? uncontrolled; const change = useCallback( (next: Checked) => { if (checkedProp === undefined) setUncontrolled(next); onCheckedChange?.(next); }, [checkedProp, onCheckedChange], ); return ( ); } export default Checkbox; 2e:T641a,

"use client";

import { MotionConfig, motion } from "motion/react";
import { Checkbox as CheckboxPrimitive } from "radix-ui";
import { useCallback, useState, type ComponentProps } from "react";
import { cn } from "@/lib/utils";

const SIZES = { sm: "size-4", md: "size-[18px]", lg: "size-5" } as const;

type Checked = boolean | "indeterminate";

export interface CheckboxProps extends ComponentProps<typeof CheckboxPrimitive.Root> {
  size?: keyof typeof SIZES;
  /** square (default) or circle. */
  shape?: "square" | "circle";
}

export function Checkbox({ size = "md", shape = "square", checked: checkedProp, defaultChecked = false, onCheckedChange, className, ...props }: CheckboxProps) {
  const [uncontrolled, setUncontrolled] = useState<Checked>(defaultChecked);
  const checked = checkedProp ?? uncontrolled;
  const change = useCallback(
    (next: Checked) => {
      if (checkedProp === undefined) setUncontrolled(next);
      onCheckedChange?.(next);
    },
    [checkedProp, onCheckedChange],
  );

  return (
    <MotionConfig reducedMotion="user">
      <CheckboxPrimitive.Root
        checked={checked}
        onCheckedChange={change}
        className={cn(
          "peer relative inline-flex shrink-0 items-center justify-center bg-white text-white outline-none transition-[background-color,box-shadow] duration-150",
          "shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.18),0_1px_2px_rgb(0_0_0/0.04)] hover:shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.3)]",
          "focus-visible:shadow-[inset_0_0_0_1.5px_rgb(0_0_0/0.3),0_0_0_3px_rgb(0_0_0/0.08)]",
          "data-[state=checked]:bg-neutral-950 data-[state=checked]:shadow-[inset_0_1px_0_rgb(255_255_255/0.15)] data-[state=indeterminate]:bg-neutral-950 data-[state=indeterminate]:shadow-[inset_0_1px_0_rgb(255_255_255/0.15)]",
          "dark:bg-white/[0.04] dark:text-neutral-950 dark:shadow-[inset_0_0_0_1.5px_rgb(255_255_255/0.22)] dark:data-[state=checked]:bg-white dark:data-[state=indeterminate]:bg-white",
          "disabled:cursor-not-allowed disabled:opacity-50",
          shape === "circle" ? "rounded-full" : "rounded-[6px]",
          SIZES[size],
          className,
        )}
        {...props}
      >
        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth={2.25} strokeLinecap="round" strokeLinejoin="round" className="size-[78%]" aria-hidden>
          <motion.path
            d="M3.5 8.5 6.6 11.4 12.5 4.8"
            initial={false}
            animate={{ pathLength: checked === true ? 1 : 0, opacity: checked === true ? 1 : 0 }}
            transition={{ pathLength: { type: "spring", bounce: 0, duration: 0.3 }, opacity: { duration: 0.1 } }}
          />
          <motion.path
            d="M4 8h8"
            initial={false}
            animate={{ pathLength: checked === "indeterminate" ? 1 : 0, opacity: checked === "indeterminate" ? 1 : 0 }}
            transition={{ pathLength: { type: "spring", bounce: 0, duration: 0.25 }, opacity: { duration: 0.1 } }}
          />
        </svg>
      </CheckboxPrimitive.Root>
    </MotionConfig>
  );
}

export default Checkbox;

2f:T543,import { Checkbox } from "@/components/scalar-ui/checkbox"; const label = "text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100"; const hint = "text-[13px] leading-5 text-neutral-500 dark:text-neutral-400"; const options = [ { id: "comments", title: "Comments", body: "When someone comments on your project.", checked: true }, { id: "deploys", title: "Deployments", body: "When a deployment succeeds or fails.", checked: true }, { id: "billing", title: "Billing", body: "Receipts and upcoming renewals.", checked: false }, ]; export default function Demo() { return (

Email me about

{options.map((o) => (

{o.title} {o.body}

))}

); } 30:T311e,

import { Checkbox } from "@/components/scalar-ui/checkbox";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100";
const hint = "text-[13px] leading-5 text-neutral-500 dark:text-neutral-400";

const options = [
  { id: "comments", title: "Comments", body: "When someone comments on your project.", checked: true },
  { id: "deploys", title: "Deployments", body: "When a deployment succeeds or fails.", checked: true },
  { id: "billing", title: "Billing", body: "Receipts and upcoming renewals.", checked: false },
];

export default function Demo() {
  return (
    <div className="w-full max-w-[380px] space-y-4 rounded-[22px] bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:shadow-none dark:ring-white/[0.08]">
      <p className="text-[14px] font-semibold tracking-[-0.01em] text-neutral-950 dark:text-white">Email me about</p>
      {options.map((o) => (
        <div key={o.id} className="flex gap-3">
          <Checkbox id={o.id} defaultChecked={o.checked} className="mt-px" />
          <label htmlFor={o.id} className="cursor-pointer">
            <span className={`block ${label}`}>{o.title}</span>
            <span className={`block ${hint}`}>{o.body}</span>
          </label>
        </div>
      ))}
    </div>
  );
}

31:T1086,

import { Checkbox } from "@/components/scalar-ui/checkbox";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100";

export default function Example() {
  return (
    <div className="flex items-center gap-2.5">
      <Checkbox id="terms" />
      <label htmlFor="terms" className={label}>
        Accept the terms of service
      </label>
    </div>
  );
}

32:T5cc,"use client"; import { useState } from "react"; import { Checkbox } from "@/components/scalar-ui/checkbox"; const label = "text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100"; const hint = "text-[13px] leading-5 text-neutral-500 dark:text-neutral-400"; const files = ["hero.png", "brand-guide.pdf", "walkthrough.mp4"]; export default function Example() { const [picked, setPicked] = useState(["hero.png"]); const all = picked.length === files.length ? true : picked.length ? "indeterminate" : false; return (

setPicked(c === true ? files : [])} /> Select all {picked.length} of {files.length}

{files.map((f) => (

setPicked((p) => (c === true ? [...p, f] : p.filter((x) => x !== f)))} /> {f}

))}

); } 33:T48cf,

"use client";

import { useState } from "react";
import { Checkbox } from "@/components/scalar-ui/checkbox";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100";
const hint = "text-[13px] leading-5 text-neutral-500 dark:text-neutral-400";

const files = ["hero.png", "brand-guide.pdf", "walkthrough.mp4"];

export default function Example() {
  const [picked, setPicked] = useState<string[]>(["hero.png"]);
  const all = picked.length === files.length ? true : picked.length ? "indeterminate" : false;
  return (
    <div className="w-full max-w-[280px] space-y-3">
      <div className="flex items-center gap-2.5 border-b border-black/[0.06] pb-3 dark:border-white/[0.08]">
        <Checkbox id="all" checked={all} onCheckedChange={(c) => setPicked(c === true ? files : [])} />
        <label htmlFor="all" className={label}>
          Select all
        </label>
        <span className={`ml-auto ${hint}`}>{picked.length} of {files.length}</span>
      </div>
      {files.map((f) => (
        <div key={f} className="flex items-center gap-2.5 pl-1">
          <Checkbox
            id={f}
            size="sm"
            checked={picked.includes(f)}
            onCheckedChange={(c) => setPicked((p) => (c === true ? [...p, f] : p.filter((x) => x !== f)))}
          />
          <label htmlFor={f} className={`${label} font-normal`}>
            {f}
          </label>
        </div>
      ))}
    </div>
  );
}

34:T4c5,"use client"; import { useState } from "react"; import { Checkbox } from "@/components/scalar-ui/checkbox"; const initial = [ { id: "t1", text: "Review the billing pull request", done: true }, { id: "t2", text: "Update the onboarding copy", done: false }, { id: "t3", text: "Ship branch previews", done: false }, ]; export default function Example() { const [tasks, setTasks] = useState(initial); return (

{tasks.map((t) => ( setTasks((all) => all.map((x) => (x.id === t.id ? { ...x, done: c === true } : x)))} /> {t.text} ))}

); } 35:T32b8,

"use client";

import { useState } from "react";
import { Checkbox } from "@/components/scalar-ui/checkbox";

const initial = [
  { id: "t1", text: "Review the billing pull request", done: true },
  { id: "t2", text: "Update the onboarding copy", done: false },
  { id: "t3", text: "Ship branch previews", done: false },
];

export default function Example() {
  const [tasks, setTasks] = useState(initial);
  return (
    <div className="w-full max-w-[320px] space-y-1">
      {tasks.map((t) => (
        <label key={t.id} htmlFor={t.id} className="flex cursor-pointer items-center gap-3 rounded-xl px-2.5 py-2 transition-colors hover:bg-neutral-950/[0.03] dark:hover:bg-white/[0.04]">
          <Checkbox
            id={t.id}
            shape="circle"
            size="lg"
            checked={t.done}
            onCheckedChange={(c) => setTasks((all) => all.map((x) => (x.id === t.id ? { ...x, done: c === true } : x)))}
          />
          <span
            className={`text-[13.5px] transition-colors ${t.done ? "text-neutral-400 line-through decoration-neutral-300" : "text-neutral-900 dark:text-neutral-100"}`}
          >
            {t.text}
          </span>
        </label>
      ))}
    </div>
  );
}

36:T6a9,import { Cloud, Database, Shield } from "lucide-react"; import { Checkbox } from "@/components/scalar-ui/checkbox"; const addons = [ { id: "backups", icon: Database, title: "Daily backups", body: "Point-in-time restore for 30 days.", price: "$8" }, { id: "cdn", icon: Cloud, title: "Edge cache", body: "Serve assets from 120 regions.", price: "$12" }, { id: "waf", icon: Shield, title: "Firewall", body: "Block bots and abusive traffic.", price: "$15" }, ]; export default function Example() { return (

{addons.map(({ id, icon: Icon, title, body, price }, i) => ( {title} {price}/mo {body} ))}

); } 37:T35cb,

import { Cloud, Database, Shield } from "lucide-react";
import { Checkbox } from "@/components/scalar-ui/checkbox";

const addons = [
  { id: "backups", icon: Database, title: "Daily backups", body: "Point-in-time restore for 30 days.", price: "$8" },
  { id: "cdn", icon: Cloud, title: "Edge cache", body: "Serve assets from 120 regions.", price: "$12" },
  { id: "waf", icon: Shield, title: "Firewall", body: "Block bots and abusive traffic.", price: "$15" },
];

export default function Example() {
  return (
    <div className="grid w-full max-w-[420px] gap-2.5">
      {addons.map(({ id, icon: Icon, title, body, price }, i) => (
        <label
          key={id}
          htmlFor={id}
          className="flex cursor-pointer items-start gap-3 rounded-2xl bg-white p-4 ring-1 ring-inset ring-black/[0.08] transition-[box-shadow,background-color] has-[[data-state=checked]]:bg-neutral-50 has-[[data-state=checked]]:ring-2 has-[[data-state=checked]]:ring-neutral-950 dark:bg-white/[0.02] dark:ring-white/[0.1] dark:has-[[data-state=checked]]:bg-white/[0.05] dark:has-[[data-state=checked]]:ring-white"
        >
          <Icon className="mt-0.5 size-4 shrink-0 text-neutral-500" />
          <span className="flex-1">
            <span className="flex justify-between text-[13.5px] font-medium text-neutral-950 dark:text-white">
              {title}
              <span className="font-normal text-neutral-500">{price}/mo</span>
            </span>
            <span className="mt-0.5 block text-[12.5px] text-neutral-500 dark:text-neutral-400">{body}</span>
          </span>
          <Checkbox id={id} defaultChecked={i === 0} className="mt-0.5" />
        </label>
      ))}
    </div>
  );
}

38:T13e7,

import { Checkbox } from "@/components/scalar-ui/checkbox";

export default function Example() {
  return (
    <div className="flex items-center gap-4">
      <Checkbox size="sm" defaultChecked aria-label="Small" />
      <Checkbox defaultChecked aria-label="Medium" />
      <Checkbox size="lg" defaultChecked aria-label="Large" />
      <Checkbox size="lg" shape="circle" defaultChecked aria-label="Large circle" />
    </div>
  );
}

39:T1cf3,

import { Checkbox } from "@/components/scalar-ui/checkbox";

const label = "text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100";

export default function Example() {
  return (
    <div className="space-y-3">
      <div className="flex items-center gap-2.5">
        <Checkbox id="d1" disabled />
        <label htmlFor="d1" className={label}>
          Disabled
        </label>
      </div>
      <div className="flex items-center gap-2.5">
        <Checkbox id="d2" disabled defaultChecked />
        <label htmlFor="d2" className={label}>
          Disabled and checked
        </label>
      </div>
    </div>
  );
}

29:["$","section","checkbox",{"id":"checkbox","aria-labelledby":"checkbox-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"checkbox-title","className":"sr-only","children":"Checkbox"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"radix-ui · motion"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"checkbox","gated":{"unlocked":true,"files":[{"name":"checkbox.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"default":{"name":"default.tsx","code":"import { Checkbox } from \"@/components/scalar-ui/checkbox\";\n\nconst label = \"text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100\";\n\nexport default function Example() {\n return (\n

\n \n \n Accept the terms of service\n \n

\n );\n}\n","html":"$31"},"indeterminate":{"name":"indeterminate.tsx","code":"$32","html":"$33"},"circle":{"name":"circle.tsx","code":"$34","html":"$35"},"cards":{"name":"cards.tsx","code":"$36","html":"$37"},"size":{"name":"size.tsx","code":"import { Checkbox } from \"@/components/scalar-ui/checkbox\";\n\nexport default function Example() {\n return (\n

\n \n \n \n \n

\n );\n}\n","html":"$38"},"disabled":{"name":"disabled.tsx","code":"import { Checkbox } from \"@/components/scalar-ui/checkbox\";\n\nconst label = \"text-[13.5px] font-medium leading-5 text-neutral-900 peer-disabled:opacity-50 dark:text-neutral-100\";\n\nexport default function Example() {\n return (\n

\n \n \n Disabled\n \n

\n \n \n Disabled and checked\n \n

\n );\n}\n","html":"$39"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add checkbox","shadcn":"npx shadcn@latest add https://scalarui.com/r/checkbox.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install radix-ui motion","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L3a","toolbar":"$L3b"}]}],["$L3c","$L3d","$L3e","$L3f","$L40","$L41"]]}]

Checkboxes

Checkboxes

Default

Indeterminate

Circle

Cards

Size

Disabled