Checkbox

A checkbox whose check draws in, with indeterminate parents, groups and labels that share its hover.

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/checkbox

npx layro-cli add @preetsuthar17/checkbox

npx layro-cli add @preetsuthar17/checkbox

bunx layro-cli add @preetsuthar17/checkbox

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
import { CheckboxGroup as CheckboxGroupPrimitive } from "@base-ui/react/checkbox-group"
import { IconCheck, IconMinus } from "@tabler/icons-react"
import { cn } from "cn"

function mergeClassName<State>(
  base: string,
  className: string | ((state: State) => string | undefined) | undefined
) {
  return typeof className === "function"
    ? (state: State) => cn(base, className(state))