# All files / src/Switch Switch.tsx

100% Statements 12/12
100% Branches 2/2
100% Functions 1/1
100% Lines 9/9

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
    562x
    2x
    2x

    2x

    2x

    9x
    9x

    9x

    2x
     import { useFocusRing } from '@react-aria/focus'
    import { VisuallyHidden } from '@react-aria/visually-hidden'
    import React from 'react'
    import { InputAttributes } from '../_utils/types'
    import {
      StyledSwitchContainer,
      StyledSwitchLabel,
      StyledToggle,
      StyledTrack,
    } from './Switch.styles'
    import { SwitchProps } from './Switch.types'

    /**

     We use switches to allow users to choose between two mutually exclusive choices
     in the same line. This is often associated with enabling vs. disabling.

     @since 10.19.0

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

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

     */
    export const Switch = React.forwardRef<
      HTMLInputElement,
      InputAttributes & SwitchProps
    >(function Switch({ children, ...props }, ref) {
      const { isFocusVisible, focusProps } = useFocusRing()

      return (
        <StyledSwitchContainer
          $focused={isFocusVisible}
          $disabled={props.disabled}
          $checked={props.checked}
        >
          <VisuallyHidden>
            <input
              ref={ref}
              {...props}
              {...focusProps}
              aria-checked={props.checked}
              role="switch"
              type="checkbox"
            />
          </VisuallyHidden>
          <StyledTrack>
            <StyledToggle />
          </StyledTrack>
          {children && <StyledSwitchLabel>{children}</StyledSwitchLabel>}
        </StyledSwitchContainer>
      )
    })

    Switch.displayName = 'Switch'