@mshafiqyajid/react-switch
Headless toggle switch hook and styled component. Controlled and uncontrolled, sizes, tones, label positioning, loading spinner.
Playground #
Enable notifications
Props
TSX
import { SwitchStyled } from "@mshafiqyajid/react-switch/styled";
import "@mshafiqyajid/react-switch/styles.css";
<SwitchStyled
checked={checked}
onChange={setChecked}
label="Enable notifications"
/>Install #
npm install @mshafiqyajid/react-switchQuick start #
import { SwitchStyled } from "@mshafiqyajid/react-switch/styled";
import "@mshafiqyajid/react-switch/styles.css";
const [on, setOn] = useState(false);
<SwitchStyled checked={on} onChange={setOn} label="Enable notifications" />API #
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state |
| defaultChecked | boolean | false | Uncontrolled initial state |
| onChange | (v: boolean) => void | — | Called on toggle |
| size | "sm" | "md" | "lg" | "md" | Size |
| tone | "neutral" | "primary" | "success" | "danger" | "primary" | Color when on |
| label | ReactNode | — | Label text |
| labelPosition | "left" | "right" | "right" | Label side |
| loading | boolean | false | Show spinner in thumb |
| disabled | boolean | false | Disable the switch |