@carbon/react/lib/components/RadioButton/RadioButton.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_useId = require("../../internal/useId.js");
const require_deprecate = require("../../prop-types/deprecate.js");
const require_utils = require("../../internal/utils.js");
const require_useNormalizedInputProps = require("../../internal/useNormalizedInputProps.js");
const require_index = require("../AILabel/index.js");
const require_mergeRefs = require("../../tools/mergeRefs.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
//#region src/components/RadioButton/RadioButton.tsx
/**
* Copyright IBM Corp. 2016, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const RadioButton = react.default.forwardRef((props, ref) => {
	const { className, decorator, disabled = false, hideLabel, id, labelPosition = "right", labelText = "", name, onChange = () => {}, value = "", slug, required, invalid = false, invalidText, warn = false, warnText, readOnly, ...rest } = props;
	const prefix = require_usePrefix.usePrefix();
	const uid = require_useId.useId("radio-button");
	const uniqueId = id || uid;
	const normalizedProps = require_useNormalizedInputProps.useNormalizedInputProps({
		id: uniqueId,
		readOnly,
		disabled,
		invalid,
		invalidText,
		warn,
		warnText
	});
	function handleOnChange(event) {
		onChange(value, name, event);
	}
	const innerLabelClasses = (0, classnames.default)(`${prefix}--radio-button__label-text`, { [`${prefix}--visually-hidden`]: hideLabel });
	const wrapperClasses = (0, classnames.default)(className, `${prefix}--radio-button-wrapper`, {
		[`${prefix}--radio-button-wrapper--label-${labelPosition}`]: labelPosition !== "right",
		[`${prefix}--radio-button-wrapper--slug`]: slug,
		[`${prefix}--radio-button-wrapper--decorator`]: decorator,
		[`${prefix}--radio-button-wrapper--invalid`]: normalizedProps.invalid,
		[`${prefix}--radio-button-wrapper--warning`]: normalizedProps.warn
	});
	const inputRef = (0, react.useRef)(null);
	const candidate = slug ?? decorator;
	const normalizedDecorator = require_utils.isComponentElement(candidate, require_index.AILabel) ? (0, react.cloneElement)(candidate, { size: candidate.props?.["kind"] === "inline" ? "md" : "mini" }) : candidate;
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
		className: wrapperClasses,
		children: [
			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
				...rest,
				type: "radio",
				className: `${prefix}--radio-button`,
				onChange: handleOnChange,
				id: uniqueId,
				ref: require_mergeRefs.mergeRefs(inputRef, ref),
				disabled: normalizedProps.disabled,
				value,
				name,
				required,
				readOnly
			}),
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
				htmlFor: uniqueId,
				className: `${prefix}--radio-button__label`,
				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${prefix}--radio-button__appearance` }), labelText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Text.Text, {
					className: innerLabelClasses,
					children: [labelText, slug ? normalizedDecorator : decorator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
						className: `${prefix}--radio-button-wrapper-inner--decorator`,
						children: normalizedDecorator
					}) : ""]
				})]
			}),
			normalizedProps.validation
		]
	});
});
RadioButton.displayName = "RadioButton";
RadioButton.propTypes = {
	checked: prop_types.default.bool,
	className: prop_types.default.string,
	decorator: prop_types.default.node,
	defaultChecked: prop_types.default.bool,
	disabled: prop_types.default.bool,
	hideLabel: prop_types.default.bool,
	id: prop_types.default.string,
	labelPosition: prop_types.default.oneOf(["right", "left"]),
	labelText: prop_types.default.node.isRequired,
	name: prop_types.default.string,
	onChange: prop_types.default.func,
	onClick: prop_types.default.func,
	required: prop_types.default.bool,
	invalid: prop_types.default.bool,
	invalidText: prop_types.default.node,
	warn: prop_types.default.bool,
	warnText: prop_types.default.node,
	readOnly: prop_types.default.bool,
	slug: require_deprecate.deprecate(prop_types.default.node, "The `slug` prop has been deprecated and will be removed in the next major version. Use the decorator prop instead."),
	value: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number])
};
//#endregion
exports.default = RadioButton;