# All files / src/Checkbox Checkbox.tsx

100% Statements 29/29
57.14% Branches 8/14
100% Functions 2/2
100% Lines 23/23

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    9757x
    57x

    57x

    37x
    37x
    37x
    37x
    37x
    37x
    37x

    37x

    57x

    57x

    10x
    10x
    10x
    10x
    10x
    10x
    10x
    10x

    10x

    57x
     import React from 'react'
    import {
      StyledCheckboxContainer,
      StyledCheckboxInput,
      StyledCheckboxLabel,
      StyledFakeCheckboxInput,
      StyledFakeCheckboxLabel,
    } from './Checkbox.styles'
    import { CheckboxProps } from './Checkbox.types'

    /**

     We use checkboxes to provide users with the ability to either select or
     deselect multiple values from a list of options (e.g. items on list pages),
     or to select or deselect a single option (e.g. settings on configure pages).

     @since 10.19.0

     @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-checkbox--demo)

     @see [Design Guidelines](https://design.procore.com/checkbox)

     */
    export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
      function Checkbox(
        {
          checked,
          children,
          className,
          error = false,
          indeterminate = false,
          style,
          ...props
        },
        ref
      ) {
        return (
          <StyledCheckboxContainer className={className} style={style}>
            <StyledCheckboxInput
              {...props}
              aria-checked={indeterminate ? 'mixed' : checked}
              type="checkbox"
              checked={checked}
              $error={error}
              $indeterminate={indeterminate}
              ref={ref}
            />
            <StyledCheckboxLabel>{children}</StyledCheckboxLabel>
          </StyledCheckboxContainer>
        )
      }
    )

    Checkbox.displayName = 'Checkbox'

    /**
     *  This checkbox was created to be used as a non-interactive Checkbox component
     *  for VoiceOver inside MenuImperative.CheckboxItem.
     *
     *  @since 11.3.0
     */

    export const FakeCheckbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
      function FakeCheckbox(
        {
          checked = false,
          children,
          className,
          disabled = false,
          error = false,
          indeterminate = false,
          style,
          ...props
        },
        ref
      ) {
        return (
          <StyledCheckboxContainer className={className} style={style} as="div">
            <StyledFakeCheckboxInput
              {...props}
              $checked={checked}
              $disabled={disabled}
              $error={error}
              $indeterminate={indeterminate}
              ref={ref}
            />
            <StyledFakeCheckboxLabel $checked={checked} $disabled={disabled}>
              {children}
            </StyledFakeCheckboxLabel>
          </StyledCheckboxContainer>
        )
      }
    )

    FakeCheckbox.displayName = 'FakeCheckbox'