Aesthetihawk Guide

Switches (Toggles)

How to Use

Switches are used to toggle settings or binary options on and off. They’re functionally similar to checkboxes but are styled like modern on/off sliders.

Basic structure:

<label class="switch">
  <span class="toggle">
    <input type="checkbox" [checked]>
    <span class="slider [colorClass]"></span>
  </span>
  <span class="label-text">Optional Label</span>
</label>

Variants and When to Use Them

✅ Default Switch

Example:

<label class="switch">
  <span class="toggle">
    <input type="checkbox">
    <span class="slider"></span>
  </span>
</label>

Use When: You need a basic toggle without any label or color indication. Best for minimal UI or visual prototypes.

✅ Checked (Default Color)

Example:
```
<input type="checkbox" checked>
```
Purpose: Starts in the “on” state.
Use When: You want the toggle to be active by default (e.g., opt-in features).

✅ Green Variant

Example:
```
<span class="slider green"></span>
```
Purpose: Adds a green color to the active state for visual reinforcement (e.g., enabling a feature or safe action).
Use When: The toggle represents something positive, confirmed, or safe (like turning on notifications or permissions).

✅ Switch with Label

Example:

<span class="label-text">Enable notifications</span>

Purpose: Describes what the toggle does.
Use When: The toggle’s purpose isn’t visually obvious. Recommended in most cases for accessibility and clarity.

Accessibility Tips

Always use a <label> so clicking the text also toggles the switch.

If no visible label is used, add an aria-label to the <input>:

<input type="checkbox" aria-label="Enable notifications">

Ensure keyboard navigation and focus styles are visible.

Good Practices

Variant	Use Case
Default	Binary option in a compact UI
Checked	Default “on” state
`.slider.green`	Confirmed/successful actions (e.g., enabled states)
With `.label-text`	Always add for clarity and accessibility

Examples

Class names aren’t listed here. Please check toggles.md for it.

My Label