Toggle

A toggle is an interactive element that allows users to switch between two states, typically on and off. It is commonly represented as a switch or a button that changes position or color to indicate the current state.

Toggles are used for settings and preferences where a binary choice is required, such as enabling or disabling notifications, switching between light and dark modes, or turning features on or off.

Well-designed toggles provide clear visual feedback and are easy to understand and use, enhancing the overall user experience by making state changes intuitive and immediate.

Basic

Figma

🧪 Beta

Guidelines

🛠 In progress

Web

🔭 Alpha

Mobile

🔭 Alpha

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

Toggle

<script lang="ts">
  import { Toggle } from '@behavy/glowup-design-system';
</script>

<Toggle label="Toggle" />

Properties

Status	Name	Type	Default	Required	Description
🔭	label	string		✅	The label of the toggle.
🔭	checked	boolean	false	❌	The state of the toggle.
🔭	disabled	boolean	false	❌	Disables the toggle.

Examples

Alternative

Radio Use a radio button to select one option from a list.

Checkbox Use a checkbox to select multiple options from a list.

Select Use a select component to choose an option from a list.

Card

Figma

⏳ To do

Guidelines

⏳ To do

Web

⏳ To do

Mobile

⏳ To do

Comment

Create the card component for the toggle in Figma

Guidelines

Correct / Incorrect

Takeaways

Features

Usage

Implementation

Properties

Status	Name	Type	Default	Required	Description

Examples

Alternative

Radio card Use a radio button card to select one option from a list.

Checkbox card Use a checkbox card to select multiple options from a list.

Select Use a select component to choose an option from a list.