zebflow 0.6.1

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import { cx } from "zeb";

/**
 * iOS-style toggle switch. Drop-in replacement for Checkbox when a
 * binary on/off control is needed without the checkbox visual.
 *
 * Usage:
 *   <Toggle checked={enabled} onChange={(e) => setEnabled(e.target.checked)} />
 *   <Toggle checked={value} onChange={handler} label="Enable" disabled={loading} />
 */
export default function Toggle({ label, checked, onChange, disabled, className, ...rest }) {
  return (
    <label className={cx("zf-toggle", disabled && "is-disabled", className)}>
      <input
        type="checkbox"
        checked={checked}
        onChange={onChange}
        disabled={disabled}
        className="sr-only"
        {...rest}
      />
      <span className="zf-toggle-track" aria-hidden="true">
        <span className="zf-toggle-thumb" />
      </span>
      {label && <span className="zf-toggle-label">{label}</span>}
    </label>
  );
}