# xpl-toggle

A Toggle is a type of form control that is used to switch between enabled and disabled states of an element.

<!-- Auto Generated Below -->


## Properties

| Property      | Attribute     | Description                                                                   | Type                   | Default     |
| ------------- | ------------- | ----------------------------------------------------------------------------- | ---------------------- | ----------- |
| `checked`     | `checked`     | Whether the toggle is `on`                                                    | `boolean`              | `undefined` |
| `description` | `description` | The toggle's description appears *above* the toggle.                          | `string`               | `undefined` |
| `disabled`    | `disabled`    | Whether the toggle is disabled                                                | `boolean`              | `undefined` |
| `heading`     | `heading`     | The toggle's heading appears *above* the toggle.                              | `string`               | `undefined` |
| `label`       | `label`       | The toggle's label appears *to the right of* the toggle.                      | `string`               | `undefined` |
| `name`        | `name`        | The name attribute for the html input. (submitted in form as name/value pair) | `string`               | `undefined` |
| `variant`     | `variant`     | The size of the toggle -- `default` or `small`                                | `"default" \| "small"` | `'default'` |


## Events

| Event          | Description                                                                       | Type                   |
| -------------- | --------------------------------------------------------------------------------- | ---------------------- |
| `toggleChange` | Emitted when the toggle checked state changes. Detail is the new `checked` value. | `CustomEvent<boolean>` |


----------------------------------------------

*Built with [StencilJS](https://stenciljs.com/)*