DEVVY UI — Build once. Style freely.

Include documentationSome items selectedUnavailable option

Usage

import { Checkbox, Label } from "@devvy-ui/react";

<Label><Checkbox name="terms" required /> Accept terms</Label>

API reference

Native HTML attributes, className, style and a forwarded ref are supported. Component-specific props:

Prop	Type	Default	Description
checked / defaultChecked	boolean	false	Controlled or initial checked state.
indeterminate	boolean	false	Mixed state; does not determine submission value.
onChange	ChangeEventHandler	—	Native change event.
disabled	boolean	false	Disables the control.

Source ownership

Add the audited implementation directly into your repository with the CLI:

node /path/to/devvy-ui/packages/cli/src/cli.mjs add checkbox

Make the source yours.

Start from the canonical implementation used by the package and registry. Change the code, keep the MIT notice, and build the behavior your project needs.

Checkbox.tsxREACT / TSX

'use client';

import { forwardRef, useEffect, useRef, type InputHTMLAttributes } from 'react';
import { cx } from '../lib/cx';

export interface CheckboxProps
  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'role'> {
  /** A visual mixed state. Supply checked/defaultChecked independently for form submission. */
  indeterminate?: boolean;
}

export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
  { className, indeterminate = false, onChange, ...props },
  ref,
) {
  const input = useRef<HTMLInputElement | null>(null);
  useEffect(() => {
    if (input.current) input.current.indeterminate = indeterminate;
  }, [indeterminate]);
  return (
    <input
      {...props}
      type="checkbox"
      className={cx('dvy-checkbox', className)}
      onChange={(event) => {
        event.currentTarget.indeterminate = indeterminate;
        onChange?.(event);
      }}
      aria-checked={indeterminate ? 'mixed' : props['aria-checked']}
      ref={(element) => {
        input.current = element;
        if (typeof ref === 'function') ref(element);
        else if (ref) ref.current = element;
      }}
    />
  );
});

Edit your own copy. Downloaded source uses your changes; the component preview above uses the shipped version. Run the source installer first to include shared helpers.

Checkbox

Interactive preview

Usage

API reference

Accessibility & behavior

Platform Behavior & Guidelines

Source ownership

Make the source yours.