Toggle Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains a Toggle LWC ReadMe for each Vlocity release.

Managed Package app icon This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.

Vlocity Insurance and Health Summer '20

The Toggle Lightning Web Component enables a user to pick between two states, enable or disable an option, or select multiple options. The Toggle LWC supports attributes available in the CheckboxGroup Lightning Web Component.

Available c-toggle Attributes

Attribute	Value	Type	Required	Description
checked-label		string		Sets the label to display when the toggle is checked. Applies when type is set to 'icon', 'statefulButton', or 'dualStatefulButton'.
icon-name	(Default: utility:check)	string		Sets the icon of the toggle. Applies when type is set to 'statefulIcon'.
icon-on-focus	(Default: utility:check)	string		Sets the toggle icon to display on hover of the element. Applies when type is set to 'statefulButton'.
label-on-focus		string		Sets the toggle label to use on hover of element. Applies when type is set to 'statefulButton'.
toggle-disabled-label	(Default: Enabled)	string		Sets the toggle label to display when the toggle is unchecked. Applies when type is set to 'toggle'.
toggle-enabled-label	(Default: Enabled)	string		Sets the toggle label to display when the toggle is checked. Applies when type is set to 'toggle'.
type	button, checkbox, icon (Default: checkbox)	string	yes	Sets the type of toggle element to display.
unchecked-label		string		Sets the label to display when the toggle is unchecked. Applies When type is set to 'icon', 'statefulButton', or 'dualStatefulButton'.
variant		string		Sets the style of the toggle button based on the type supported by the chosen theme. For example, 'success', 'brand', and so on.

Example c-toggle Component

<c-toggle
  name="vehicle"
  value="bike"
  options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
></c-toggle>

Label Slot Usage

To dynamically insert markup next to the input's label, add a named slot (name = label).

Example Label Slot Usage

<c-toggle
  name="vehicle"
  value="bike"
  options='[{"label":"car","value":"car"},{"label":"bike","value":"bike"},{"label":"ship","value":"ship"}]'
>
  <span slot="label">Additional markup is inserted here</span>
</c-toggle>

Available Methods

Supports all methods available in the CheckboxGroup Lightning Web Component.