@shopify/polaris/esnext/components/RadioButton/RadioButton.js

Shopify’s product component library

import React from 'react';
import { useUniqueId } from '../../utilities/unique-id';
import { useFeatures } from '../../utilities/features';
import { classNames } from '../../utilities/css';
import { Choice, helpTextID } from '../Choice';
import styles from './RadioButton.scss';
export function RadioButton({ ariaDescribedBy: ariaDescribedByProp, label, labelHidden, helpText, checked, disabled, onChange, onFocus, onBlur, id: idProp, name: nameProp, value, }) {
    const id = useUniqueId('RadioButton', idProp);
    const name = nameProp || id;
    const { unstableGlobalTheming = false } = useFeatures();
    function handleChange({ currentTarget }) {
        onChange && onChange(currentTarget.checked, id);
    }
    const describedBy = [];
    if (helpText) {
        describedBy.push(helpTextID(id));
    }
    if (ariaDescribedByProp) {
        describedBy.push(ariaDescribedByProp);
    }
    const ariaDescribedBy = describedBy.length
        ? describedBy.join(' ')
        : undefined;
    const inputClassName = classNames(styles.Input);
    const backdropClassName = classNames(styles.Backdrop);
    const wrapperClassName = classNames(styles.RadioButton, unstableGlobalTheming && styles.globalTheming);
    return (<Choice label={label} labelHidden={labelHidden} disabled={disabled} id={id} helpText={helpText}>
      <span className={wrapperClassName}>
        <input id={id} name={name} value={value} type="radio" checked={checked} disabled={disabled} className={inputClassName} onChange={handleChange} onFocus={onFocus} onBlur={onBlur} aria-describedby={ariaDescribedBy}/>
        <span className={backdropClassName}/>
        <span className={styles.Icon}/>
      </span>
    </Choice>);
}