diff --git a/src/Switcher/Switcher.jsx b/src/Switcher/Switcher.jsx
new file mode 100644
index 0000000..8224c4b
--- /dev/null
+++ b/src/Switcher/Switcher.jsx
@@ -0,0 +1,106 @@
+'use strict';
+
+import React, { PropTypes } from 'react';
+
+import { COLOR } from '../const/theme';
+
+import { StyleSheet, css } from '../helpers/styles';
+
+export default class Switcher extends React.Component {
+ static propTypes = {
+ /**
+ * Is switcher in checked state
+ */
+ isChecked: PropTypes.bool,
+ /**
+ * Is switcher in disabled state
+ */
+ isDisabled: PropTypes.bool,
+ /**
+ * On click event handler
+ */
+ onClick: PropTypes.func,
+ /**
+ * On change event handler
+ */
+ onChange: PropTypes.func
+ };
+
+ static defaultProps = {
+ isChecked: false
+ };
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ isChecked: props.isChecked
+ };
+
+ this._onClickHandler = this._onClickHandler.bind(this);
+ }
+
+ componentWillReceiveProps(newProps) {
+ if (this.state.isChecked !== newProps.isChecked) {
+ this.setState({ isChecked: newProps.isChecked });
+ }
+ }
+
+ _onClickHandler(event) {
+ const props = this.props;
+
+ if (!props.isDisabled) {
+ this.setState({ isChecked: !this.state.isChecked }, () => {
+ props.onClick && props.onClick(event);
+ props.onChange && props.onChange(this.state.isChecked);
+ })
+ };
+ }
+
+ render() {
+ const props = this.props;
+
+ return (
+
+ )
+ }
+}
+
+const STYLE = StyleSheet.create({
+ main: {
+ width: '32px',
+ height: '16px',
+ borderRadius: '50px',
+ cursor: 'pointer',
+ display: 'inline-block',
+ float: 'left',
+ boxShadow: 'rgba(27, 42, 48, 0.329412) 0px 1px 2px inset',
+ background: 'rgb(195, 200, 203)'
+ },
+ toggle: {
+ boxShadow: 'rgba(27, 42, 48, 0.4) 0px 2px 3px',
+ width: '12px',
+ height: '12px',
+ left: '2px',
+ top: '2px',
+ borderRadius: '100%',
+ background: '#ffffff',
+ position: 'relative',
+ transition: 'left .1s ease-in-out'
+ },
+ on: {
+ background: 'rgb(112, 195, 22)'
+ },
+ toggleOn: {
+ left: '19px',
+ color: '#70c316'
+ },
+ isDisabled: {
+ opacity: 0.5
+ }
+});
diff --git a/src/Switcher/Switcher.md b/src/Switcher/Switcher.md
new file mode 100644
index 0000000..a75c9e9
--- /dev/null
+++ b/src/Switcher/Switcher.md
@@ -0,0 +1,24 @@
+### Usage
+
+```js
+import Switcher from '@roistat/ui/lib/Switcher';
+```
+const View = require('../View').default;
+
+*Switcher*
+
+
+
+
+
+*Switcher is disabled*
+
+
+
+
+
+*Switcher is checked*
+
+
+
+
diff --git a/src/Switcher/index.js b/src/Switcher/index.js
new file mode 100644
index 0000000..828e854
--- /dev/null
+++ b/src/Switcher/index.js
@@ -0,0 +1 @@
+export { default } from './Switcher';
diff --git a/src/Switcher/story.jsx b/src/Switcher/story.jsx
new file mode 100644
index 0000000..97f66a1
--- /dev/null
+++ b/src/Switcher/story.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Switcher from './Switcher';
+import View from '../View';
+
+storiesOf('Switcher', module)
+ .add('Switcher', () => (
+
+
+
+ ))
+
+ .add('Switcher is disabled', () => (
+
+
+
+ ))
+
+ .add('Switcher is checked', () => (
+
+
+
+ ));