Developer Programs
Vendor Integration Program (VIP)
Direct access to Jack Henry's technical integration resources.
Technical Account Manager (TAM)
Get technical integration help from a single point of contact.
Developer Account
Create a developer acccount to access resources that help you integrate with Jack Henry.
Learn
Shared Responsibility
Learn about shared roles and responsibilities of customers and Jack Henry in open banking.
Developer Use Cases
Find a use case that fits your development needs.
Developer Video Gallery
Watch the latest demos, webinars, and more.
Developer Conference
Connect with industry leaders, gain insights from expert speakers, and explore our latest innovations.
Docs
Admin API
Create solutions for an institution's back office support tools.
Authentication Framework
Map customer identities to your existing system IDs.
Consumer API
Access financial data for user accounts, transactions, and more.
Data Broker
Get deeper access to financial institution data.
Enterprise Event System
Respond to events in real-time using this powerful pub/sub-based solution.
jXchange - REST API
Translate business information between Jack Henry and third-party applications using a REST-based API.
jXchange - SOAP API
Translate business information between Jack Henry and third-party applications using a SOAP-based API.
Operational Data Integration (ODI)
Get customized queries for bulk data needs.
Payments
Embed check deposits, ACH, bill pay, cards, and real-time payments.
Plugin Framework
Embed the best of the fintech world directly into your user's dashboard.
SymXchange
Query Symitar core member accounts, post transactions, run PowerOn scripts, and more.
Xperience
Modern UI that provides consistent visual integration across Jack Henry products.

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
rui-toggle
Module: rui-input - Package: @jkhy/responsive-ui-wc

Allows the user to change a Boolean value

NameTypeDefaultDescription
valuebooleanfalseBind this property to a backing value in your controller to set the initial value for the toggle.
rui-value-changeeventThis 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.
labelTextstring''If the toggle needs to be labeled, specify its label text with this property.
isDisabledbooleanfalseSpecifies whether the toggle is disabled.

Implementation

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

Import the module
// import into app.module
import '@jkhy/responsive-ui-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 wrapper development

Wrapper reference

jha-toggle
jha-toggle
Module: JhaToggleModule - Package: @jkhy/responsive-ui-angular

Allows the user to change a Boolean value

NameTypeDefaultDescription
jhaToggleValbooleanfalseIf the toggle is part of a template-driven form, two-way bind this property to a backing value.
jhaLabelstring''If the toggle needs to be labeled, specify its label text with this property.
jhaIsDisabledbooleanfalseSpecifies whether the toggle is disabled.
jhaToggleValChangeeventThis event fires when the toggle’s value changes.

Implementation

Begin by importing the JhaToggleModule module into your application.

Import the module
// import into app.module
import { JhaToggleModule } from '@jkhy/responsive-ui-angular/jha-toggle';

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

export class AppModule(){}

Reactive form example:

Toggle HTML
<jha-toggle id="showPasswords" formControlName="showPasswords"></jha-toggle>

Template driven form example:

Toggle HTML
<jha-toggle id="showPasswords" [(jhaToggleVal)]="showPasswords"></jha-toggle>

Design

Figma design

Figma design info
You can find this component in the Components - Buttons page in the Figma UI Kit.
Dev ComponentDesign 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 ComponentDesign Component Name
Toggle - onJHA / Buttons / Toggle / On
Toggle - offJHA / 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 Tue Feb 13 2024