<label for="switch" class="switch">
<input type="checkbox" class="switch__checkbox " value="" id="switch">
<div class="switch__control"></div>
<span class="switch__label">Inkludera tillbehörsdokument</span>
</label>
<label for="{{ name }}" class="switch">
<input type="checkbox" class="switch__checkbox {{ additionalClasses }}" value="{{value}}" {{{ getattributes attr }}} {{#if checked}}checked{{/if}} id="{{ name }}">
<div class="switch__control"></div>
<span class="switch__label">{{ label }}</span>
</label>
{
"name": "switch",
"label": "Inkludera tillbehörsdokument"
}
import React from 'react';
import PropTypes from 'prop-types';
const Switch = (props) => {
const [checked, setChecked] = React.useState(props.checked);
const handleChange = () => {
if (props.disabled) {
props.onChange(false);
return;
}
const newChecked = !checked;
setChecked(newChecked);
if (props.onChange) {
props.onChange(newChecked); // Call the onChange prop with the new state
}
};
if (props.disabled) {
props.onChange(false);
} else
props.onChange(checked);
return (
<label htmlFor={props.id} className="switch energy-calculator__switch">
<input
type="checkbox"
className="switch__checkbox"
value={props.value}
id={props.id}
checked={props.disabled ? false : checked}
onChange={() => { }}
disabled={props.disabled}
/>
<div className="switch__control" onClick={handleChange}></div>
<span className="switch__label">{props.label}</span>
</label>
);
};
Switch.propTypes = {
checked: PropTypes.bool,
value: PropTypes.string,
id: PropTypes.string,
label: PropTypes.string,
onChange: PropTypes.func,
disabled: PropTypes.bool
};
export default Switch;
.switch {
display: flex;
}
.switch__checkbox {
position: absolute;
left: -9999px;
&:checked {
border: 1px solid red;
&+.switch__control {
background-color: $color-green-dark;
@include color-theme {
background-color: $arg-theme-color;
}
&:after {
transform: translateX(17px);
}
}
&~.switch__label {
color: $color-green-dark;
@include color-theme {
color: $arg-theme-color;
}
}
}
&:focus~.switch__control {
outline: 4px auto #4D90FE;
}
}
.switch__control {
position: relative;
min-width: size(5.5);
height: size(3);
border: 1px solid $color-gray-3;
border-radius: 12px;
background-color: $color-gray-3;
&:after {
content: '';
position: absolute;
left: 4px;
top: 3px;
background-color: $color-white;
border: 1px solid $color-white;
border-radius: 50%;
width: size(2);
height: size(2);
transform: translateX(0);
transition: transform .2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
}
.switch__label {
padding-top: 6px;
padding-left: size(2);
font-weight: $font-weight-bold;
color: $color-gray-5;
}
No notes defined.