# @astrouxds/rux-switch

> Astro Web Component for toggles

Latest version **5.3.0** (published 2021-10-21) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @astrouxds/rux-switch
pnpm add @astrouxds/rux-switch
yarn add @astrouxds/rux-switch
bun add @astrouxds/rux-switch
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.3.0 |
| Published | 2021-10-21 |
| First published | 2021-06-28 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rocket Communications |
| Maintainers | jacob-rocket, dmcalester, joel_perez, rocketmark, sasha-rocket |

## Links

- npm: https://www.npmjs.com/package/@astrouxds/rux-switch
- Repository: https://github.com/RocketCommunicationsInc/astro-components/src/master
- Homepage: https://www.astrouxds.com
- Issues: https://github.com/RocketCommunicationsInc/astro-components/issues
- npm.io page: https://npm.io/package/@astrouxds/rux-switch

## Dependencies (2)

- [lit-element](https://npm.io/package/lit-element.md) ^2.1.0
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.2.10

## Recent versions

- 5.3.0 (latest) — 2021-10-21
- 5.0.1 — 2021-06-28

## README

# Switch

A Switch toggles between two mutually exclusive states such as "On" or "Off." Unlike a checkbox, a switch initiates an action with immediate effect without requiring a "Save" or "Submit" action.

## Guidelines

-   [Astro UXDS: Switch](http://www.astrouxds.com/ui-components/switch)

## Web Components Usage

### 1. Installation

#### ** Install the Astro UXDS Switch package via Command Line** (Preferred Method)

```sh
npm i --save @astrouxds/rux-switch
```

You may use Yarn, NPM, or your Node package manager of choice. The `--save` flag adds this component as a dependency in your `package.json` file.

#### **Alternatively**, download the [Astro UXDS Component Library](https://bitbucket.org/rocketcom/astro-components/src/master/) source to your project.

Via CLI:

```sh
git clone https://bitbucket.org/rocketcom/astro-components.git
```

Or, [download the Astro UXDS Components as a .zip](https://bitbucket.org/rocketcom/astro-components/get/master.zip)

### 2. Import the Astro Switch Web Component

This example assumes you're using the NPM package in `node_modules`. Otherwise, import the component using the path to the Astro Components directory in your project.

```javascript
import { RuxSwitch } from '@astro-components/rux-switch/rux-switch.js'
```

### 3. Render the Astro Switch Web Component

Pass properties as attributes of the Astro Switch custom element:

```xml
<rux-switch disabled="false" checked="false"></rux-switch>
```

### Properties

| Property   | Type    | Default | Required | Description                                                                                                                                                                                 |
| ---------- | ------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | Boolean | `false` | No       | Disables the button via HTML `disabled` attribute. Button takes on a distinct visual state. Cursor uses the `not-allowed` system replacement and all keyboard and mouse events are ignored. |
| `checked`  | Boolean | `false` | No       | Checks the button via HTML `checked` attribute. Button takes on a distinct "enabled" or "selected" visual state.                                                                            |

---

## Basic HTML Usage

### 1. Include the Astro UXDS CSS file

Latest release is available in [Astro UXDS Styles repo](https://bitbucket.org/rocketcom/astro-styles/src/master/).

```xml
<link rel="stylesheet" href="/your-project/path/astro.css" />
```

### 2. Markup the component using HTML and the Astro CSS classes

Astro CSS classes follow the [BEM-style](http://getbem.com/introduction/) naming convention.

Configure the component using native HTML attributes.

```xml
 <div class="rux-switch">
    <input class="rux-switch__input" disabled id="switch1" type="checkbox">
    <label class="rux-switch__button" for="switch1"></label>
</div>
```

### Attributes

| Attribute  | Type    | Default | Required | Description                                                                                                                                                                                 |
| ---------- | ------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `disabled` | Boolean | `false` | No       | Disables the button via HTML `disabled` attribute. Button takes on a distinct visual state. Cursor uses the `not-allowed` system replacement and all keyboard and mouse events are ignored. |
| `checked`  | Boolean | `false` | No       | Checks the button via HTML `checked` attribute. Button takes on a distinct "enabled" or "selected" visual state.                                                                            |

For more information about AstroUXDS usage outside of a Web Component environment, please see [Astro UXDS Stylesheets](https://bitbucket.org/rocketcom/astro-styles)

## Revision History

##### **4.1**

-   Replaced [Polymer 3](https://www.polymer-project.org) implementation with [LitElement](https://lit-element.polymer-project.org/) for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.

##### **3.0**

-   Breaking change to markup of switch button

##### **2.1**

-   Moved Pushbuttons to its own style sheet

##### **1.4**

-   Added `rux_` prefixes and BEM-compatible classes to all `satcom_`-prefixed elements. NOTE: `satcom_` will be removed in a future version
-   Removed prefixed linear gradients
-   Removed prefixed transition
-   Fixed added colon to checked pseudo class (e.g., checked became :checked)
-   Alignment issue fixed on switch button label
-   Updated to WCAG colors
-   Updated transition speed

---
_Source: https://npm.io/package/@astrouxds/rux-switch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._