@equinor/eds-core-react/dist/esm/components/Checkbox/Checkbox.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled from 'styled-components';
import { checkbox } from './Checkbox.tokens.js';
import { typographyTemplate } from '@equinor/eds-utils';
import { CheckboxInput } from './Input.js';
import { jsxs, jsx } from 'react/jsx-runtime';

/* eslint camelcase: "off" */
const StyledLabel = styled.label.withConfig({
  displayName: "Checkbox__StyledLabel",
  componentId: "sc-yg6l8h-0"
})(["display:inline-flex;align-items:center;cursor:", ";"], ({
  $disabled
}) => $disabled ? 'not-allowed' : 'pointer');
const LabelText = styled.span.withConfig({
  displayName: "Checkbox__LabelText",
  componentId: "sc-yg6l8h-1"
})(["", ";"], typographyTemplate(checkbox.typography));
const Checkbox = /*#__PURE__*/forwardRef(function Checkbox({
  label,
  disabled = false,
  indeterminate,
  className,
  style,
  ...rest
}, ref) {
  return label ? /*#__PURE__*/jsxs(StyledLabel, {
    $disabled: disabled,
    className: className,
    style: style,
    children: [/*#__PURE__*/jsx(CheckboxInput, {
      ...rest,
      disabled: disabled,
      ref: ref,
      indeterminate: indeterminate
    }), /*#__PURE__*/jsx(LabelText, {
      children: label
    })]
  }) : /*#__PURE__*/jsx(CheckboxInput, {
    ...rest,
    className: className,
    style: style,
    disabled: disabled,
    ref: ref,
    indeterminate: indeterminate
  });
});
Checkbox.displayName = 'Checkbox';

export { Checkbox };