Toggle Field

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.

The ToggleField extends the Toggle element by adding a label and description.

Usage

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

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

<ToggleField
    id="toggle-field-demo"
    label="A toggle field"
    checked={isChecked}
    onChange={setIsChecked}
/>

Label

Use the label prop to add a label to the ToggleField component.

<ToggleField
    id="toggle-field-label"
    label="Toggle field Label 👋"
    checked={isChecked}
    onChange={setIsChecked}
/>

Description

Use the description prop to add a description to the ToggleField component.

Toggle field description 🙌

<ToggleField
    id="toggle-field-description"
    label="Toggle field Label 👋"
    description="Toggle field description 🙌"
    checked={isChecked}
    onChange={setIsChecked}
/>

Checked

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

<ToggleField
    id="toggle-field-checked"
    label="Default checked toggle field"
    checked={true}
    onChange={setIsChecked}
/>

Disabled

You can disable the toggle by passing the disabled prop.

<ToggleField
    id="toggle-field-disable"
    label="Disabled toggle field"
    checked={isChecked}
    onChange={setIsChecked}
    disabled={true}
/>

Props

Attribute	Type	Description	Default
id^*	`string` \|	The id for the toggle field.	-
label^*	`string` \|	The label for the toggle field.	-
checked^*	`bool` \|	Toggle field checked state	`false`
onChange^*	`function` \|	Fired when changed. The function will receive the new value as an argument.	-
labelSuffix	`string` \|	Content to display after the label.	-
description	`node` \|	The description for the toggle field.	-
disabled	`bool` \|	If true, the toggle will be disabled.	`false`
ariaLabel	`string` \|	-	-
className	`string` \|	-	-

Toggle Field

Usage​

Label​

Description​

Checked​

Disabled​

Props​