@outbook/webcomponents-form-input-switch

This package provides a customizable switch form input web component.

Installation

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

Usage

As a Lit Element

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.

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

<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.