# All files / src/RadioButton RadioButton.tsx

100% Statements 11/11
50% Branches 1/2
100% Functions 1/1
100% Lines 6/6

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
    446x
    6x

    6x

    8x

    8x

    6x
     import React from 'react'
    import {
      StyledRadioButton,
      StyledRadioButtonInput,
      StyledRadioButtonLabel,
    } from './RadioButton.styles'
    import { RadioButtonProps } from './RadioButton.types'

    /**

     We use radio buttons to allow users to select a single, exclusive option from
     a list of multiple options.

     To present options in a dropdown, use a single select.

     @since 10.19.0

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

     @see [Design Guidelines](https://design.procore.com/radio-button)

     */
    export const RadioButton = React.forwardRef<
      HTMLInputElement,
      React.InputHTMLAttributes<HTMLInputElement> & RadioButtonProps
    >(function RadioButton(
      { children, className, error = false, style, ...props },
      ref
    ) {
      return (
        <StyledRadioButton
          className={className}
          style={style}
          $children={children}
          $error={error}
        >
          <StyledRadioButtonInput type="radio" ref={ref} {...props} />
          <StyledRadioButtonLabel>{children}</StyledRadioButtonLabel>
        </StyledRadioButton>
      )
    })

    RadioButton.displayName = 'RadioButton'