> For the complete documentation index, see [llms.txt](https://yashs-organization-7.gitbook.io/modular-ui-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yashs-organization-7.gitbook.io/modular-ui-documentation/switch.md).

# Switch

## Switch

## MUISwitch

A basic switch widget provided by Modular UI.

### Properties

* **`checked`**: *bool* - The value to use for the underlying switch widget.
* **`onChanged`**: *ValueChanged?* - Called when the value of the switch should change.
* **`width`**: *double* - The width of the switch; default: 40.
* **`height`**: *double* - The height of the switch; default: 20.
* **`circleSize`**: *double* - The absolute size of the circle, aka diameter; default: 18.
* **`animationDuration`**: *Duration* - The duration of the animation; default: Durations.short3.
* **`animationCurve`**: *Curve* - The curve of the animation; default: Curves.easeInOut.
* **`onStateCol`**: *Color* - The color when the switch is in the "on" state; default: Colors.white.
* **`offStateCol`**: *Color* - The color when the switch is in the "off" state; default: Color.fromARGB(255, 39, 39, 42).

#### `newYork({ ... })`

A factory method to create a New York-style switch.

#### Parameters

* **`checked`**: *bool* - The initial value of the switch; default: false.
* **`onChanged`**: *ValueChanged?* - Callback when the value of the switch changes.
* **`width`**: *double* - The width of the switch; default: 38.
* **`height`**: *double* - The height of the switch; default: 18.
* **`circleSize`**: *double* - The absolute size of the circle, aka diameter; default: 16.
* **`onStateCol`**: *Color* - The color when the switch is in the "on" state; default: Colors.white.
* **`offStateCol`**: *Color* - The color when the switch is in the "off" state; default: Color.fromARGB(255, 39, 39, 42).

### Example Usage

{% embed url="<https://verdant-lokum-9bd5c2.netlify.app/#/switch>" %}
Switch
{% endembed %}

```dart
MUISwitch(
  checked: true,
  onChanged: (value) {
    // Handle switch value change
    print("Switch Value: $value");
  },
  width: 40,
  height: 20,
  circleSize: 18,
  animationDuration: Durations.short3,
  animationCurve: Curves.easeInOut,
  onStateCol: Colors.white,
  offStateCol: Color.fromARGB(255, 39, 39, 42),
);

// Alternatively, use the New York-style switch
MUISwitch.newYork(
  checked: false,
  onChanged: (value) {
    // Handle switch value change
    print("Switch Value: $value");
  },
  width: 38,
  height: 18,
  circleSize: 16,
  onStateCol: Colors.white,
  offStateCol: Color.fromARGB(255, 39, 39, 42),
);
```

### **Notes**

* Provides a basic switch widget with customizable appearance.
* Supports a New York-style switch through the **`newYork`** factory method.
* Utilizes animations for a smooth transition between states.