npm package: @licuido-ui/ui_switch
Description: The Switch component provides users with a switch for toggling between two mutually exclusive states.
Latest version: 3.0.1

# Switch

The Switch component provides users with a switch for toggling between two mutually exclusive states.

### Author

- @author Henry Dyson J <henry@crayond.co>

## Link

[Story Book Link to Switch](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_switch
```

## Import component

```jsx
import { Switch } from '@licuido-ui/ui_switch';
```

## Usage

```jsx
<Switch label={'My Label'} isLabel={true} />
```

## Image

![alt text](./Switch.png)

## Sample Code

```jsx
<Switch
  label={'My Label'}
  isLabel={true}
  id={''}
  className={''}
  sx={{}}
  switchSx={{}}
  switchTrackActiveStyle={{ backgroundColor: '#0C356A' }}
  switchTrackDefaultStyle={{ backgroundColor: '#d7e3ff' }}
  switchThumbActiveStyle={{ color: '#fff' }}
  switchThumbDefaultStyle={{ color: '#0C356A' }}
/>
```

## Props

| **Name**                    | **Description**                                                                                              | **Default**                                 | **Control **    |
| --------------------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------------------- | --------------- |
| **id**                      | string                                                                                                       | string                                      |
| **className**               | string                                                                                                       | ""                                          |
| **sx**                      | The system prop that allows defining system overrides as well as additional CSS styles\.SxProps&lt;Theme&gt; | \{ \}                                       | sx : \{\}       |
| **label**                   | string                                                                                                       | ""                                          | sample label    |
| **isLabel**                 | boolean                                                                                                      | false                                       | FalseTrue       |
| **switchSx**                | SxProps&lt;\{\}&gt;                                                                                          | \{ \}                                       | switchSx : \{\} |
| **action**                  | A ref for imperative actions currently only supports focusVisible\(\) action\.Ref&lt;ButtonBaseActions&gt;   | \-                                          | Set object      |
| **centerRipple**            | If true, the ripples are centered They won't start at the cursor interaction position\.boolean               | false                                       | Set boolean     |
| **disableTouchRipple**      | If true, the touch ripple effect is disabled\.boolean                                                        | false                                       | Set boolean     |
| **focusRipple**             | If true, the base button will have a keyboard focus ripple\.boolean                                          | false                                       | Set boolean     |
| **focusVisibleClassName**   |                                                                                                              | \-                                          | Set string      |
| **LinkComponent**           | The component used to render a link when the href prop is provided\.ElementType&lt;any&gt;                   | 'a'                                         | Set object      |
| **onFocusVisible**          |                                                                                                              | -                                           | -               |
| **TouchRippleProps**        | Props applied to the TouchRipple element                                                                     | -                                           | -               |
| **touchRippleRef**          | A ref that points to the TouchRipple element                                                                 | ref                                         | -               |
| **component**               | ReactNode                                                                                                    | ReactNode                                   | ReactNode       |
| **labelStyle**              | SxProps                                                                                                      | SxProps                                     | SxProps{}       |
| **switchTrackDefaultStyle** | SxProps                                                                                                      | SxProps                                     | SxProps{}       |
| **switchThumbDefaultStyle** | SxProps                                                                                                      | SxProps                                     | SxProps{}       |
| **switchTrackActiveStyle**  | SxProps                                                                                                      | SxProps                                     | SxProps{}       |
| **switchThumbActiveStyle**  | SxProps                                                                                                      | SxProps                                     | SxProps{}       |
| **formControlLabelStyle**   | SxProps                                                                                                      | SxProps                                     | SxProps{}       |
| **labelPlacement**          | 'start' `or` 'end' `or` 'top' `or` 'bottom'                                                                  | 'start' `or` 'end' `or` 'top' `or` 'bottom' | start           |