@drivy/cobalt/components/Form/ToggleSwitch.js

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import { Hint } from './Hint.js';

const ToggleSwitch = ({ large, status, label, position, hint, ...inputProps }) => {
    return (jsxs("div", { className: cx("cobalt-ToggleSwitchField", {
            "cobalt-ToggleSwitchField--large": large,
            "cobalt-ToggleSwitchField--position-left": position === "left",
            "cobalt-ToggleSwitchField--error": status === "error",
            "cobalt-ToggleSwitchField--standalone": !label,
        }), children: [jsxs("label", { className: "cobalt-ToggleSwitchField__LabelWrapper", children: [jsx("input", { ...inputProps, type: "checkbox", className: "cobalt-ToggleSwitchField__Input" }), jsx("span", { className: "cobalt-ToggleSwitchField__ToggleSwitch", children: jsx("span", { className: "cobalt-ToggleSwitchField__ToggleSwitchSlider" }) }), label && (jsx("span", { className: "cobalt-ToggleSwitchField__Label", children: label }))] }), hint && (jsx(Hint, { status: status, children: jsx("span", { dangerouslySetInnerHTML: { __html: hint } }) }))] }));
};

export { ToggleSwitch };
//# sourceMappingURL=ToggleSwitch.js.map