Toggle

For quickly switching between two possible states.

defaultToggled

disabled

helpText

labelText

offText

onText

toggled

onChange

() => onChange('onChange', e)

() => onChange('onChange', e)

required

requirementText

className

import * as React from "react";
import { Toggle } from "@nulogy/components";

export default () => {
  return (
    <Toggle
      helpText="Switch this setting on or off for more control."
      labelText="New mode:"
      offText="disabled"
      onText="enabled"
      onChange={() => onChange("onChange", e)}
      required={false}
      requirementText="(Optional)"
    />
  );
}

import * as React from "react";
import { Toggle } from "@nulogy/components";

export default () => {
  return (
    <Toggle
      helpText="Switch this setting on or off for more control."
      labelText="New mode:"
      offText="disabled"
      onText="enabled"
      onChange={() => onChange("onChange", e)}
      required={false}
      requirementText="(Optional)"
    />
  );
}

Props

Name	Type	Default	Description
defaultToggled	boolean	false	Display the toggle as checked by default.
disabled	boolean	false	Marks the toggle as disabled and disallows user input.
helpText	string		Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used.
labelText	string		Informs users what the corresponding input field is for.
offText	string	false	A label for the toggle's off state.
onText	string	false	A label for the toggle's on state.
toggled	boolean		The value of the toggle when using as a controlled component.
onChange	function		Function that triggers when toggle is clicked, use with the toggled prop for a controlled component.
required	boolean	false	Makes the field require input before the form will submit.
requirementText	string		(Optional) or (Required).
id	string		A unique ID for this input.
className	string		Class name.

Related Components

Checkbox