# ce-switch

<!-- Auto Generated Below -->


## Properties

| Property   | Attribute  | Description                                                                                               | Type      | Default     |
| ---------- | ---------- | --------------------------------------------------------------------------------------------------------- | --------- | ----------- |
| `checked`  | `checked`  | Draws the switch in a checked state.                                                                      | `boolean` | `false`     |
| `disabled` | `disabled` | Disables the switch.                                                                                      | `boolean` | `false`     |
| `edit`     | `edit`     | This will be true as a workaround in the block editor to focus on the content.                            | `boolean` | `false`     |
| `invalid`  | `invalid`  | This will be true when the control is in an invalid state. Validity is determined by the `required` prop. | `boolean` | `false`     |
| `name`     | `name`     | The switch's name attribute.                                                                              | `string`  | `undefined` |
| `required` | `required` | Makes the switch a required field.                                                                        | `boolean` | `false`     |
| `reversed` | `reversed` |                                                                                                           | `boolean` | `undefined` |
| `value`    | `value`    | The switch's value attribute.                                                                             | `string`  | `undefined` |


## Events

| Event      | Description                                       | Type                |
| ---------- | ------------------------------------------------- | ------------------- |
| `scBlur`   | Emitted when the control loses focus.             | `CustomEvent<void>` |
| `scChange` | Emitted when the control's checked state changes. | `CustomEvent<void>` |
| `scFocus`  | Emitted when the control gains focus.             | `CustomEvent<void>` |


## Methods

### `reportValidity() => Promise<boolean>`

Checks for validity and shows the browser's validation message if the control is invalid.

#### Returns

Type: `Promise<boolean>`




## Shadow Parts

| Part            | Description |
| --------------- | ----------- |
| `"base"`        |             |
| `"control"`     |             |
| `"description"` |             |
| `"thumb"`       |             |
| `"title"`       |             |


## CSS Custom Properties

| Name           | Description               |
| -------------- | ------------------------- |
| `--height`     | The height of the switch. |
| `--thumb-size` | The size of the thumb.    |
| `--width`      | The width of the switch.  |


## Dependencies

### Used by

 - [sc-customer-edit](../../controllers/dashboard/customer-edit)
 - [sc-payment-methods-list](../../controllers/dashboard/payment-methods-list)

### Graph
```mermaid
graph TD;
  sc-customer-edit --> sc-switch
  sc-payment-methods-list --> sc-switch
  style sc-switch fill:#f9f,stroke:#333,stroke-width:4px
```

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

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