@primer/components/lib-esm/Checkbox.js

Primer react components

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import styled from 'styled-components';
import { useProvidedRefOrCreate } from './hooks';
import React, { useLayoutEffect } from 'react';
import sx from './sx';
const StyledCheckbox = styled.input.withConfig({
  displayName: "Checkbox__StyledCheckbox",
  componentId: "sc-i51804-0"
})(["cursor:pointer;", " ", ""], props => props.disabled && `cursor: not-allowed;`, sx);
/**
 * An accessible, native checkbox component
 */

const Checkbox = /*#__PURE__*/React.forwardRef(({
  checked,
  indeterminate,
  disabled,
  sx: sxProp,
  required,
  validationStatus,
  ...rest
}, ref) => {
  const checkboxRef = useProvidedRefOrCreate(ref);
  useLayoutEffect(() => {
    if (checkboxRef.current) {
      checkboxRef.current.indeterminate = indeterminate || false;
    }
  }, [indeterminate, checked, checkboxRef]);
  return /*#__PURE__*/React.createElement(StyledCheckbox, _extends({
    type: "checkbox",
    disabled: disabled,
    "aria-disabled": disabled ? 'true' : 'false',
    ref: ref || checkboxRef,
    checked: indeterminate ? false : checked,
    "aria-checked": indeterminate ? 'mixed' : checked ? 'true' : 'false',
    sx: sxProp,
    required: required,
    "aria-required": required ? 'true' : 'false',
    "aria-invalid": validationStatus === 'error' ? 'true' : 'false'
  }, rest));
});
Checkbox.displayName = 'Checkbox';
export default Checkbox;