Toggle

For quickly switching between two possible states.

Label

Off

import { Toggle } from "@nulogy/components";

<Toggle id="toggle" labelText="Label" onText="On" offText="Off" />

Variations

Disabled

Off

<Toggle id="disabled-toggle" onText="On" offText="Off" disabled />

Toggled by default

On

<Toggle id="toggled-toggle" onText="On" offText="Off" defaultToggled="true" />

With all labels

Toggle(Required)

Turns setting on/off

On

<Toggle id="toggle-with-labels"
  labelText="Toggle"
  helpText="Turns setting on/off"
  onText="On"
  offText="Off"
  requirementText="(Optional)"
/>

Props

NameTypeDefaultDescription

defaultToggled

Boolean

false

Display the toggle as checked by default.

disabled

Boolean

false

Marks the toggle as disabled and disallows user input.

id

String

null

A unique ID for this input.

value

String

on

Value on the input that can be submitted.

helpText

String

null

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

null

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

undefined

The value of the toggle when using as a controlled component.

onChange

Function

null

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

null

(Optional) or (Required).

className

String

undefined

className passed to the container element.

Related components