AWE Toggle component

The AWE Toggle component provides a customizable toggle switch that can be used for on/off or true/false inputs. It's commonly used for enabling or disabling settings, features, or options.

Basic Usage

The toggle component allows users to switch between two states. It provides visual feedback on the current state and can be customized with labels and descriptions.

<awe-toggle label="Basic Toggle"></awe-toggle>

<awe-toggle label="Checked Toggle" value="true"></awe-toggle>

<awe-toggle label="With Description" description="Additional information about this toggle"></awe-toggle>

Note: In an actual Angular application, bind the value property using square brackets, e.g., [value]="true" to follow Angular's property binding syntax.

Properties

Property	Type	Default	Description
label	string	'Toggle'	The text label displayed with the toggle
description	string	undefined	Additional descriptive text displayed below the label
disabled	boolean	false	Whether the toggle is disabled
size	'small' | 'medium' | 'large'	'large'	The size of the toggle component
textPosition	'before' | 'after'	'before'	The position of the label and description relative to the toggle
value	WritableSignal<boolean>	signal(false)	The current state of the toggle

Events

Event	Description
valueChange	Emitted when the toggle value changes

Sizes

The toggle component supports three different sizes to accommodate various design needs.

<awe-toggle label="Small Toggle" size="small"></awe-toggle>

<awe-toggle label="Medium Toggle" size="medium"></awe-toggle>

<awe-toggle label="Large Toggle" size="large"></awe-toggle>

States

The toggle component can be in different states based on user interaction or programmatic control.

<awe-toggle label="Default Toggle" value="false"></awe-toggle>

<awe-toggle label="Checked Toggle" value="true"></awe-toggle>

<awe-toggle label="Disabled Toggle" disabled="true"></awe-toggle>

<awe-toggle label="Disabled Checked Toggle" value="true" disabled="true"></awe-toggle>

Text Positions

The toggle component allows placing the label and description either before or after the toggle switch.

<awe-toggle 
  label="Text Before Toggle (Default)" 
  description="Label and description appear before toggle"
  textPosition="before">
</awe-toggle>

<awe-toggle 
  label="Text After Toggle" 
  description="Label and description appear after toggle"
  textPosition="after">
</awe-toggle>

Forms Integration

The toggle component implements the ControlValueAccessor interface, making it compatible with Angular's form directives. This allows it to be used with both template-driven and reactive forms.

Template-driven Forms

<form #myForm="ngForm">
  <awe-toggle label="Subscribe to newsletter" [(ngModel)]="isSubscribed" name="subscribe"></awe-toggle>
</form>

Reactive Forms

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-toggle-example',
  template: `
    <form [formGroup]="toggleForm">
      <awe-toggle label="Enable Feature" formControlName="enableFeature"></awe-toggle>
    </form>
  `
})
export class ToggleExampleComponent {
  toggleForm = new FormGroup({
    enableFeature: new FormControl(false)
  });
}

Styling

The toggle component uses CSS variables for styling. You can override these variables in your own CSS to customize the appearance of the toggle component.

Accessibility

The toggle component is designed with accessibility in mind:

• It uses the appropriate ARIA attributes, including role="switch" and aria-checked
• It supports keyboard navigation with Enter and Space keys
• The toggle can be focused with the Tab key
• It includes proper labeling and description text

Best Practices

• Use concise and clear labels that indicate what the toggle controls
• Consider adding a description for additional context when needed
• Use consistent toggle sizes throughout your application
• Provide immediate visual feedback when the toggle state changes
• Consider the default state carefully (on or off) for each use case