Toggle Component

Figma

The glu-toggle component is a switch-style input that allows users to toggle between on and off states. It supports optional left and right labels, error messaging, and supplemental helper text. The component is fully accessible, with proper ARIA attributes and keyboard interactions (using the space or Enter key), and it emits a glChange event whenever its state changes.

Basic Usage

Example 1: Simple Toggle

HTML

Result

Loading...

Live Editor

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
></glu-toggle>

React

Result

Loading...

Live Editor

<GluToggle
  leftLabel="Off"
  rightLabel="On"
/>

Vue

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
></glu-toggle>

<script setup>
import { GluToggle } from '@gelato-ui/vue';
</script>

Angular

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
></glu-toggle>

import { Component } from '@angular/core';
import { GluToggle } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluToggle],
  template: `<glu-toggle leftLabel="Off" rightLabel="On"></glu-toggle>`
})
export class MyComponent {}

---

Toggle with Error and Helper Text

When an error occurs, you can display an error message along with supplemental helper text. In this example, the toggle shows an error state and includes an error icon next to the helper text.

HTML

Result

Loading...

Live Editor

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
  error="Invalid selection"
  helperText="Please toggle the switch appropriately"
  helperIcon="error-icon"
></glu-toggle>

React

Result

Loading...

Live Editor

<GluToggle
  leftLabel="Off"
  rightLabel="On"
  error="Invalid selection"
  helperText="Please toggle the switch appropriately"
  helperIcon="error-icon"
/>

Vue

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
  error="Invalid selection"
  helperText="Please toggle the switch appropriately"
  helperIcon="error-icon"
></glu-toggle>

<script setup>
import { GluToggle } from '@gelato-ui/vue';
</script>

Angular

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
  error="Invalid selection"
  helperText="Please toggle the switch appropriately"
  helperIcon="error-icon"
></glu-toggle>

import { Component } from '@angular/core';
import { GluToggle } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluToggle],
  template: `
    <glu-toggle
      leftLabel="Off"
      rightLabel="On"
      error="Invalid selection"
      helperText="Please toggle the switch appropriately"
      helperIcon="error-icon"
    ></glu-toggle>
  `
})
export class MyComponent {}

---

Disabled Toggle

Disable the toggle to prevent user interaction.

HTML

Result

Loading...

Live Editor

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
  disabled
></glu-toggle>

React

Result

Loading...

Live Editor

<GluToggle
  leftLabel="Off"
  rightLabel="On"
  disabled
/>

Vue

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
  disabled
></glu-toggle>

<script setup>
import { GluToggle } from '@gelato-ui/vue';
</script>

Angular

<glu-toggle
  leftLabel="Off"
  rightLabel="On"
  disabled
></glu-toggle>

import { Component } from '@angular/core';
import { GluToggle } from '@gelato-ui/angular';

@Component({
  standalone: true,
  imports: [GluToggle],
  template: `<glu-toggle leftLabel="Off" rightLabel="On" disabled></glu-toggle>`
})
export class MyComponent {}

---

Properties

Property	Attribute	Description	Type	Default
checked	checked	Current state of the toggle	boolean	false
disabled	disabled	Disables the toggle	boolean	false
error	error	Error message to display	string	undefined
helperIcon	helper-icon	Helper icon name	string	undefined
helperIconVariant	helper-icon-variant	Helper icon variant	"outline" | "solid"	'outline'
helperText	helper-text	Supplemental helper text	string	undefined
leftLabel	left-label	Optional left label text	string	undefined
rightLabel	right-label	Optional right label text	string	undefined

Events

Event	Description	Type
glChange	Emitted when toggle state changes	CustomEvent<{ checked: boolean; event: Event; }>

Dependencies

Depends on

• glu-label
• glu-helper-text

Graph

---

Built with StencilJS