Sergio Pereira
ESEN
LinkedInManfred
Idioma
ESEN
Apariencia
Forms

Checkbox

Casilla de verificación con estado indeterminado y enlace en el label

Preview

size
label
link
indeterminate
required
error
disabled

Code

import css from "./Checkbox.module.css";
import { useEffect, useRef } from "react";

import { CheckIcon } from "@phosphor-icons/react/dist/csr/Check";
import { MinusIcon } from "@phosphor-icons/react/dist/csr/Minus";

type Size = "xs" | "sm" | "md" | "lg";

interface ResponsiveSize {
  base: Size;
  mobile?: Size;
  tablet?: Size;
  desktop?: Size;
  wide?: Size;
}

interface CheckboxLink {
  label: string;
  href: string;
  target?: string;
}

interface CheckboxProps {
  size: Size | ResponsiveSize;
  name?: string;
  label?: string;
  link?: CheckboxLink;
  "aria-label"?: string;
  indeterminate?: boolean;
  checked: boolean;
  required?: boolean;
  error?: boolean;
  disabled?: boolean;
  onChange: (checked: boolean) => void;
}

function getSizeClasses(size: Size | ResponsiveSize): string {
  if (typeof size === "string") {
    return css[size];
  }

  const classes = [css[`${size.base}_base`]];

  if (size.mobile) classes.push(css[`${size.mobile}_mobile`]);
  if (size.tablet) classes.push(css[`${size.tablet}_tablet`]);
  if (size.desktop) classes.push(css[`${size.desktop}_desktop`]);
  if (size.wide) classes.push(css[`${size.wide}_wide`]);

  return classes.join(" ");
}

export default function Checkbox({
  size,
  name,
  label,
  link,
  "aria-label": ariaLabel,
  indeterminate,
  checked,
  required,
  error,
  disabled,
  onChange,
}: CheckboxProps) {
  const input = useRef<HTMLInputElement>(null);

  const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
    onChange(ev.target.checked);
  };

  // A DOM property with no HTML attribute: only script can set it.
  useEffect(() => {
    input.current!.indeterminate = indeterminate ?? false;
  }, [indeterminate]);

  const Wrapper = label || link ? "label" : "span";

  return (
    <Wrapper
      className={`
        ${css.checkbox}
        ${getSizeClasses(size)}
        ${checked ? css.checked : ""}
        ${indeterminate ? css.indeterminate : ""}
        ${error ? css.error : ""}
        ${disabled ? css.disabled : ""}
      `}
    >
      <input
        ref={input}
        type="checkbox"
        name={name}
        checked={checked}
        required={required}
        disabled={disabled}
        aria-label={label || link ? undefined : ariaLabel}
        aria-invalid={error}
        onChange={handleChange}
      />
      <span className={css.checkbox_box}>
        {indeterminate ? (
          <MinusIcon className={css.box_icon} weight="bold" aria-hidden="true" />
        ) : (
          <CheckIcon className={css.box_icon} weight="bold" aria-hidden="true" />
        )}
      </span>
      {(label || link) && (
        <span className={css.checkbox_label}>
          {label}
          {label && link && " "}
          {link && (
            <a
              className={css.label_link}
              href={link.href}
              target={link.target}
              rel={link.target === "_blank" ? "noopener noreferrer" : undefined}
            >
              {link.label}
            </a>
          )}
          {required && <span aria-hidden="true">*</span>}
        </span>
      )}
    </Wrapper>
  );
}

Props

PropTypeRequiredDescription
size"xs" | "sm" | "md" | "lg" | ResponsiveSizerequiredTamaño de la casilla (caja, icono y label). Fijo o responsive.
namestring—Nombre del campo cuando vive en un formulario; sin él no se envía.
labelstring—Texto junto a la casilla. Sin label ni link, queda solo la caja.
link{ label: string; href: string; target?: string }—Enlace dentro de la etiqueta, detrás del texto. Pulsarlo no marca la casilla.
aria-labelstring—Nombre del control para lectores de pantalla. Requerida si no hay label ni link; con ellos se ignora.
indeterminateboolean—Estado a medias, con un guion en la caja. Es el "seleccionar todo" cuando solo hay algunas filas marcadas. Se anuncia como "mixto".
requiredboolean—Marca el campo como obligatorio (añade * al label y el required nativo).
errorboolean—Estado de error visual (borde rojo, aria-invalid).
disabledboolean—Desactiva la casilla (no interactiva, opacidad reducida).
checkedbooleanrequiredEstado marcado (controlado).
onChange(checked: boolean) => voidrequiredCallback con el nuevo estado en cada cambio.