# Toggle - Usage

> Usage guide for the ix-toggle

# Toggle - Usage

A toggle is a user interface element that enables users to switch between two states, such as on/off or enable/disable. It consists of a switch that can be slid or clicked to change its state. They offer a visually clear representation of the current state and allow users to easily toggle between different settings. We typically use toggles in settings, preferences, and other areas where users need to switch between two states quickly and easily.

![Anatomy toggle](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7147-451930&t=DrLi4Tgyh22TBGiT-4)

1. Toggle
2. Toggle label

## Options

- **Label:** See [form field](../forms-field).
- **Helper text**: See [form field](../forms-field).
- **Feedback text**: See [form field](../forms-field).

## Behavior in context

- **Validation**: See [validation](../forms-validation).
- **Interaction**: Clicking on the toggle switch changes its state from on to off or vice versa. The toggle visually reflects the current state.

## States

![Toggle states](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Pattern-Illustrations?node-id=3389-9845&t=VCAAFzKIYCDb7nIX-4)

## Dos and Don’ts

  
    
      Do use toggles for single features or options that need to be switched quickly and easily
      Do provide clear labels for toggles to indicate what they control
      Do use toggles consistently throughout the interface for similar actions or settings
    
  
  
    
      Don’t use toggles for complex multi-state options or settings
      Don’t use toggles for actions that require a confirmation or additional input
      Don’t use toggles for actions that are irreversible or have serious consequences
    
  

## Related

- [Form field](../forms-field)
- [Validation](../forms-validation)
- [Layout](../forms-layout)
- [Checkbox](../checkbox)
- [Radio](../radio)