# All files / src/components/ui radio-group.tsx

0% Statements 0/51
0% Branches 0/1
0% Functions 0/1
0% Lines 0/51

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

     import { ComponentProps, forwardRef, createContext, useContext } from "react"
    import { cn } from "@/lib/utils"

    interface RadioGroupContextValue {
      value?: string
      onValueChange?: (value: string) => void
    }

    const RadioGroupContext = createContext<RadioGroupContextValue | null>(null)

    interface RadioGroupProps extends ComponentProps<"div"> {
      value?: string
      onValueChange?: (value: string) => void
    }

    export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
      ({ className, value, onValueChange, ...props }, ref) => (
        <RadioGroupContext.Provider value={{ value, onValueChange }}>
          <div ref={ref} className={cn("mat-mdc-radio-group", className)} role="radiogroup" {...props} />
        </RadioGroupContext.Provider>
      )
    )
    RadioGroup.displayName = "RadioGroup"

    export const RadioGroupItem = forwardRef<HTMLInputElement, ComponentProps<"input"> & { value: string }>(
      ({ className, value, ...props }, ref) => {
        const context = useContext(RadioGroupContext)
        const isChecked = context?.value === value

        return (
          <div className={cn("mat-mdc-radio-button", className)}>
            <div className="mdc-radio">
              <input
                ref={ref}
                type="radio"
                className="mdc-radio__native-control"
                checked={isChecked}
                onChange={() => context?.onValueChange?.(value)}
                {...props}
              />
              <div className="mdc-radio__background">
                <div className="mdc-radio__outer-circle" />
                <div className="mdc-radio__inner-circle" />
              </div>
              <div className="mdc-radio__ripple" />
            </div>
          </div>
        )
      }
    )
    RadioGroupItem.displayName = "RadioGroupItem"