# Switch

A toggle lets users switch a setting on or off. 


## Overview

### Behaviour

Changing the switch updates the state immediately. The current state should always be clear to the user, and the component should provide feedback for different interaction states such as hover, focus, pressed, and disabled.

### Size

The switch is available in two sizes: default and small. The small size should only be used in compact views where space is limited, such as dense layouts or smaller components.

### Label

Labels describe the setting, not the state. They should be short and specific, remain clear in both on and off states, and not require additional context to understand.

For example, use labels like “Email notifications”, “Show balance”, or “Enable dark mode”. Avoid labels such as “On / Off”, “Active”, or “Enabled”, as they do not clearly communicate what the toggle controls.

### Accessibility

A toggle must have a visible and persistent label and communicate its state programmatically as on or off. It should be operable via keyboard and include a visible focus indicator. The state should not rely on color alone to be understood, and the component must meet contrast requirements in all states.

### Do's and Don'ts


## UX Guidelines

### Writing UX text for toggle

### Keep labels short

### Provide context where needed