ui / forms

Checkbox

A native checkbox with a precise custom control and visible focus.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

PROJECT NAMEENVIRONMENT

Include motion recipesAutomatic themeRespect the stored preference

INSTALL / SOURCE REGISTRY

Add Checkbox to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/checkbox.json

registry/default/ui/checkbox.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export const Checkbox = React.forwardRef<HTMLInputElement, Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & { label: React.ReactNode }>(
  ({ label, className, ...props }, ref) => (
    <label className={cn("dos-check", className)}>
      <input ref={ref} type="checkbox" {...props} />
      <span>{label}</span>
    </label>
  ),
)
Checkbox.displayName = "Checkbox"

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy