checkbox controlled from outside
I want to control a checkbox from the outside and expose either a function onChange and the props.checked that will be reactive.
import { createSignal } from 'solid-js';
import c from './Switch.module.scss';
function SwitchButton(props) {
return (
<div
style={{
display: 'flex',
}}
>
<div style={{ 'align-self': 'center' }}>{props.label1}</div>
<label class={c.switch}>
<input
type={'checkbox'}
class={c.input}
checked={props.checked}
onChange={(e) => props?.onChange?.(e)}
/>
<span class={c.slider}></span>
</label>
<div style={{ 'align-self': 'center' }}>{props.label2}</div>
</div>
);
}
export default SwitchButton;
import { createSignal } from 'solid-js';
import c from './Switch.module.scss';
function SwitchButton(props) {
return (
<div
style={{
display: 'flex',
}}
>
<div style={{ 'align-self': 'center' }}>{props.label1}</div>
<label class={c.switch}>
<input
type={'checkbox'}
class={c.input}
checked={props.checked}
onChange={(e) => props?.onChange?.(e)}
/>
<span class={c.slider}></span>
</label>
<div style={{ 'align-self': 'center' }}>{props.label2}</div>
</div>
);
}
export default SwitchButton;
