npm package: @outbook/webcomponents-form-input-switch
Description: Web components form-input-switch
Author: Antonio Rodríguez
Latest version: 1.1.1

# @outbook/webcomponents-form-input-switch

This package provides a customizable switch form input web component.

## Installation

```bash
npm install @outbook/webcomponents-form-input-switch
```

## Usage

### As a Lit Element

```javascript
import {html} from 'lit';
import {FormInputSwitch} from '@outbook/webcomponents-form-input-switch';

function render() {
  return html`
    ${FormInputSwitch({
    name: 'my-switch',
    label: 'Enable Feature',
    value: 'feature-enabled',
    isChecked: true,
    eventFn: (e) => console.log('Switch changed:', e.detail.checked),
  })}
  `;
}
```

### Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

```javascript
import '@outbook/webcomponents-form-input-switch';
```

```html
<outbook-form-input-switch
  name="feature-toggle"
  label="Toggle Feature"
  value="feature-value"
></outbook-form-input-switch>
```

## Component: `outbook-form-input-switch`

This is the underlying web component. It can be used directly in HTML or in any framework.

### Properties

| Attribute      | Property     | Type      | Default     | Description                                                     |
|----------------|--------------|-----------|-------------|-----------------------------------------------------------------|
| `name`         | `name`       | `String`  | `''`        | The name for the input element.                                 |
| `label`        | `label`      | `String`  | `''`        | The text label displayed next to the switch.                    |
| `value`        | `value`      | `String`  | `''`        | The value associated with the input.                            |
| `input-id`     | `inputId`    | `String`  | `null`      | The ID for the underlying `<input>` element. If not provided, a unique ID is generated. |
| `test-id`      | `testId`     | `String`  | `null`      | A `data-test-id` attribute for testing purposes.                |
| `status`       | `status`     | `String`  | `'enabled'` | The status of the switch. Can be `enabled` or `disabled`.       |
| `checked`      | `checked`    | `String`  | `'false'`   | The checked state of the switch. Can be `'true'` or `'false'`.  |

### Events

- **`input-change`**: Fired when the user toggles the switch. The `event.detail.checked` property can be used to get the new state.

### Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

### Custom Properties

Can be used with css `light-dark` function.

| Custom Property                                       | Description                                                 |
|-------------------------------------------------------|-------------------------------------------------------------|
| `--outbook-form-input-switch--background-color`       | The background color of the switch track when not checked.  |
| `--outbook-form-input-switch--background-color--on`   | The background color of the switch track when checked.      |
| `--outbook-form-input-switch--track-border-color`     | The border color of the switch track when not checked.      |
| `--outbook-form-input-switch--track-border-color--on` | The border color of the switch track when checked.          |
| `--outbook-form-input-switch--indicator-color`        | The color of the switch indicator (thumb) when not checked. |
| `--outbook-form-input-switch--indicator-color--on`    | The color of the switch indicator (thumb) when checked.     |

## License

This component is licensed under the Apache-2.0 License.