Toggle

A toggle switch allows users to switch between two states (on and off) by clicking or tapping on it. Toggle switches are commonly used in settings or options menus to enable or disable certain features or functions.

---

Usage

import { Toggle } from "@newfold/ui-component-library";

const [isChecked, setIsChecked] = useState(false);

<Toggle
    id="toggle-id"
    screenReaderLabel="Toggle"
    onChange={setIsChecked}
/>

---

Label

You can use the Label component to add a label to the toggle.

Enable Airplane Mode

import { Toggle, Label } from "@newfold/ui-component-library";

<Label 
    htmlFor="toggle-id-label"
    label="Enable Airplane Mode"
    className="nfd-cursor-pointer"
/>
<Toggle
    id="toggle-id-label"
    screenReaderLabel="Enable Airplane Mode"
    onChange={handleChange}
    className="nfd-mt-2"
/>

---

Checked

You can set the toggle to be checked by default by passing the checked prop.

<Toggle
    id="toggle-id-checked"
    screenReaderLabel="Toggle"
    onChange={handleChange}
    checked={true}
/>

---

Disabled

You can disable the toggle by passing the disabled prop.

<Toggle
    id="toggle-id-disabled"
    screenReaderLabel="Disabled Toggle"
    onChange={handleChange}
    disabled={true}
/>

---

Props

Attribute	Type	Description	Default
id*	string |	-	-
screenReaderLabel*	string |	A hidden label for the toggle (accessibility)	-
onChange*	function |	Fired when changed. The function will receive the new value as an argument.	-
checked	bool |	-	false
disabled	bool |	If true, the toggle will be disabled.	false
as	button | div | span |	The element type to render as.	button
type	string |	The type of the input.	-
className	string |	-	-