> For the complete documentation index, see [llms.txt](https://tuantvk.gitbook.io/monalisaui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tuantvk.gitbook.io/monalisaui/switch.md).

# Switch

Renders a boolean input.

![MonalisaUI](https://raw.githubusercontent.com/tuantvk/monalisa-ui/master/assets/monalisaui-switch.png)

View full example: [Switch Example](https://github.com/tuantvk/monalisa-ui/blob/master/example/Switch/index.js)

```javascript
import React from 'react';
import { View } from 'react-native';
import { Switch } from 'monalisa-ui';

const Example = () => (
  <View>
    <Switch />
  </View>
);

export default Example;
```

## Configuration

| Property    | Default |  Option  |             Description             |
| ----------- | :-----: | :------: | :---------------------------------: |
| style       |    -    |     -    |         Style for the switch        |
| height      |    18   |  number  |            Height switch            |
| bgColor     | #3e50fa |  string  |  Custom colors for the switch track |
| thumbColor  |   #fff  |  string  | Color of the foreground switch grip |
| circleStyle |    -    |     -    |       Style of the thumbColor       |
| onChange    |    -    | function |         Return value switch         |

## Example

* switch customize

```javascript
import React from 'react';
import { View } from 'react-native';
import { Switch } from 'monalisa-ui';

const Example = () => (
  <View>
    <Switch height={30} />
    <Switch bgColor="#ff0000" thumbColor="#53c641" />
    <Switch onChange={() => alert("Change value")} />
  </View>
);

export default Example;
```