Toggle

Components > Editing Data > Toggle

Use this component to...

Allow the user to change a Boolean value

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Use the toggle component to allow the user to change a Boolean value.

The toggle acts like a physical switch that allows users to turn things on or off, like a light switch.

If a label is specified, it displays to the right of the toggle.

Development

Web component development

Component reference

rui-toggle

Module: rui-input - Package: @jha/rui-wc

Allows the user to change a Boolean value

Name	Type	Default	Description
value	boolean	false	Bind this property to a backing value in your controller to set the initial value for the toggle.
rui-value-change	event		This event fires when the toggle’s value changes. The new value is passed in the event detail. Use this event to update the backing value in your controller.
labelText	string	''	If the toggle needs to be labeled, specify its label text with this property.
isDisabled	boolean	false	Specifies whether the toggle is disabled.

Implementation

Begin by importing the rui-input module into your application.

Import the module

// import into app.module
import '@jha/rui-wc/components/rui-input/rui-input-imports';

Example:

Toggle HTML

<rui-toggle labelText="Show Passwords" [value]="showPasswords" (rui-value-change)="showPasswords = $event.detail"></rui-toggle>

Angular component development

Component reference

jha-toggle

Module: JhaToggleModule - Package: @jha/jharesponsive

Allows the user to change a Boolean value

Name	Type	Default	Description
jhaToggleVal	boolean	false	If the toggle is part of a template-driven form, two-way bind this property to a backing value.
jhaIsReactive	boolean	false	If the toggle is part of a reactive form, set this property to true and set the formControlName attribute for the field.
jhaIsDisabled	boolean	false	Specifies whether the toggle is disabled.
jhaToggleValChange	event		This event fires when the toggle’s value changes.
jhaToggleBlur	event		If jhaIsReactive is set to false, the jhaToggleBlur event fires when the toggle’s blur event is triggered.

Implementation

Begin by importing the JhaToggleModule module into your application.

Import the module

// import into app.module
import { JhaToggleModule } from '@jha/jharesponsive/jha-toggle';

@NgModule({
    imports: [
        ...
        JhaToggleModule,
        ...
    ]
})

export class AppModule(){}

Reactive form example:

Toggle HTML

<jha-toggle id="showPasswords" formControlName="showPasswords" [jhaIsReactive]="true"></jha-toggle>

Template driven form example:

Toggle HTML

<jha-toggle id="showPasswords" [(jhaToggleVal)]="showPasswords" (jhaToggleBlur)="toggleBlur($event);"></jha-toggle>

Design

Figma design

Figma design info

You can find this component in the Components - Buttons page in the Figma UI Kit.

Dev Component	Design Component Name
Toggle	RUI / Buttons / Toggle Switch on the Checked property if the toggle is on.

Dev Component

Design Component Name

Toggle

RUI / Buttons / Toggle

Switch on the Checked property if the toggle is on.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Sample App - Buttons

Dev Component	Design Component Name
Toggle - on	JHA / Buttons / Toggle / On
Toggle - off	JHA / Buttons / Toggle / Off

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Wed Mar 29 2023