Mcoli UI - MC Checkbox

Overview

The mc-checkbox is a core form control of the MicroClub UI library. Built on the @base-ui/react checkbox primitive, it provides accessible state handling and keyboard interactions while keeping MicroClub styling and theme tokens.

As a part of the MicroClub library, this component is designed for instant deployment into your codebase, giving you full ownership of its look and behavior.

Preview

Checkboxsupport Text

import { McCheckbox } from '../ui/mc-checkbox';export default function McCheckboxDemo() {  return <McCheckbox text="Checkbox" supportText="support Text" />;}

Add to Your Project

Deploy the mc-checkbox directly to your components/ui directory:

npx mcoli-ui@latest add mc-checkbox

pnpm dlx mcoli-ui@latest add mc-checkbox

yarn dlx mcoli-ui@latest add mc-checkbox

bunx mcoli-ui@latest add mc-checkbox

Manual Setup

If you prefer manual control:

Install the core dependencies

npm install clsx tailwind-merge @base-ui/react class-variance-authority lucide-react

pnpm add clsx tailwind-merge @base-ui/react class-variance-authority lucide-react

yarn add clsx tailwind-merge @base-ui/react class-variance-authority lucide-react

bun add clsx tailwind-merge @base-ui/react class-variance-authority lucide-react

Copy the source code

'use client';import * as React from 'react';import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';import { cva, type VariantProps } from 'class-variance-authority';import { CheckIcon } from 'lucide-react';import { cn } from '@/lib/utils';const checkboxVariants = cva(  'peer relative flex shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50',  {    variants: {      size: {        sm: 'size-4 [&_[data-slot=checkbox-indicator]>svg]:size-3',        md: 'size-5 [&_[data-slot=checkbox-indicator]>svg]:size-3.5',      },    },    defaultVariants: {      size: 'sm',    },  });const textVariants = cva('font-medium transition-colors', {  variants: {    size: {      sm: 'text-sm',      md: 'text-base',    },    disabled: {      true: 'text-muted-foreground',      false: 'text-foreground',    },  },  defaultVariants: {    size: 'sm',    disabled: false,  },});const supportTextVariants = cva('font-regular', {  variants: {    size: {      sm: 'text-sm',      md: 'text-base',    },  },  defaultVariants: {    size: 'sm',  },});export interface McCheckboxProps  extends CheckboxPrimitive.Root.Props, VariantProps<typeof checkboxVariants> {  text?: string;  supportText?: string;}function McCheckbox({  className,  size = 'sm',  text,  supportText,  id,  disabled,  checked,  onCheckedChange,  ...props}: McCheckboxProps) {  const checkboxId = React.useId();  const finalId = id ?? checkboxId;  const labelId = text ? `${finalId}-label` : undefined;  const descriptionId = supportText ? `${finalId}-description` : undefined;  return (    <label      htmlFor={finalId}      className={cn(        'inline-flex',        size === 'sm' ? 'gap-2' : 'gap-3',        supportText ? 'items-start' : 'items-center',        disabled ? 'cursor-not-allowed' : 'cursor-pointer',        className      )}    >      <CheckboxPrimitive.Root        id={finalId}        data-slot="checkbox"        className={cn(          checkboxVariants({ size }),          'bg-primary-foreground border-muted-foreground',          'hover:border-primary',          'focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring',          'focus-within:outline-none focus-within:ring-4 focus-within:ring-ring',          'data-disabled:border-muted-foreground data-disabled:hover:border-muted-foreground',          'data-checked:border-primary'        )}        checked={checked}        onCheckedChange={onCheckedChange}        disabled={disabled}        aria-labelledby={labelId}        aria-describedby={descriptionId}        {...props}      >        <CheckboxPrimitive.Indicator          data-slot="checkbox-indicator"          className="flex items-center justify-center text-current data-disabled:text-muted-foreground"        >          <CheckIcon className="stroke-3" />        </CheckboxPrimitive.Indicator>      </CheckboxPrimitive.Root>      {(text || supportText) && (        <span className={cn('flex flex-col', size === 'sm' ? 'gap-0' : 'gap-0.5')}>          {text && (            <span id={labelId} className={textVariants({ size, disabled: !!disabled })}>              {text}            </span>          )}          {supportText && (            <span id={descriptionId} className={supportTextVariants({ size })}>              {supportText}            </span>          )}        </span>      )}    </label>  );}export { McCheckbox };

Adjust import paths

Ensure your @/lib/utils or equivalent classname helper is correctly imported.

Usage

import { McCheckbox } from '@/components/ui/mc-checkbox';

export default function Example() {
  return <McCheckbox text="Remember me" />;
}

Examples

Sizes

<McCheckbox size="sm" text="Small checkbox" />
<McCheckbox size="md" text="Medium checkbox" />

With Support Text

<McCheckbox text="Remember me" supportText="Save my login details for next time." />

States

<McCheckbox text="Unchecked" checked={false} />
<McCheckbox text="Checked" checked />
<McCheckbox text="Disabled" disabled />
<McCheckbox text="Disabled checked" checked disabled />

Controlled

Manage the checked state programmatically with checked and onCheckedChange.

import { useState } from 'react';
import { McCheckbox } from '@/components/ui/mc-checkbox';

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

  return <McCheckbox text="I agree to the terms" checked={checked} onCheckedChange={setChecked} />;
}

API Reference

Props

Prop	Type	Default	Description
`size`	`"sm" \| "md"`	`"sm"`	The checkbox size
`text`	`string`	`undefined`	Main label displayed next to the checkbox
`supportText`	`string`	`undefined`	Secondary helper text under the main label
`checked`	`boolean`	`undefined`	Controlled checked state
`onCheckedChange`	`(boolean \| "indeterminate") => void`	`undefined`	Callback when checked state changes
`disabled`	`boolean`	`false`	Disables interactions and applies disabled styles
`id`	`string`	`undefined`	Custom ID for the checkbox input
`className`	`string`	`undefined`	Additional CSS classes for the checkbox root

All other props from @base-ui/react/checkbox are supported.

MC Checkbox

On this page