UNPKG

@navikt/ds-react

Version:

React components from the Norwegian Labour and Welfare Administration.

21 lines 1.49 kB
import React, { forwardRef } from "react"; import { BodyShort } from "../../typography/index.js"; import { omit, useId } from "../../utils-external/index.js"; import { cl } from "../../utils/helpers/index.js"; import { useRadio } from "./useRadio.js"; export const Radio = forwardRef((props, ref) => { const { inputProps, size, hasError, readOnly } = useRadio(props); const descriptionId = useId(); return (React.createElement("div", { className: cl(props.className, "aksel-radio", `aksel-radio--${size}`, { "aksel-radio--error": hasError, "aksel-radio--disabled": inputProps.disabled, "aksel-radio--readonly": readOnly, }), "data-color": hasError ? "danger" : props["data-color"] }, React.createElement("input", Object.assign({}, omit(props, ["children", "size", "description", "readOnly"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { "aria-describedby": cl(inputProps["aria-describedby"], { [descriptionId]: props.description, }) || undefined, className: "aksel-radio__input", ref: ref })), React.createElement(BodyShort, { as: "label", htmlFor: inputProps.id, className: "aksel-radio__label", size: size }, props.children), props.description && (React.createElement(BodyShort, { id: descriptionId, size: size, className: "aksel-form-field__subdescription aksel-radio__description" }, props.description)))); }); export default Radio; //# sourceMappingURL=Radio.js.map