Toggle

Toggle

<div id="toggle">
  <div>
    <div>Unchecked by default</div>
    <div id="toggle-unchecked"/>
  </div>

  <div>
    <div>Checked by default</div>
    <div id="toggle-checked"/>
  </div>

  <div>
    <div>Disabled unchecked</div>
    <div id="toggle-unchecked-disabled"/>
  </div>

  <div>
    <div>Disabled checked</div>
    <div id="toggle-checked-disabled"/>
  </div>

  <div>
    <div>Pale unchecked by default</div>
    <div id="pale-toggle-unchecked"/>
  </div>

  <div>
    <div>Pale checked by default</div>
    <div id="pale-toggle-checked"/>
  </div>

  <div>
    <div>Pale disabled unchecked</div>
    <div id="pale-toggle-unchecked-disabled"/>
  </div>

  <div>
    <div>Pale disabled checked</div>
    <div id="pale-toggle-checked-disabled"/>
  </div>

  <div>
    <div>With label</div>
    <div id="with-label"/>
  </div>
</div>

import {render} from 'react-dom';
import React from 'react';
import Toggle from '@jetbrains/ring-ui/components/toggle/toggle';

render(
  <Toggle/>,
  document.getElementById('toggle-unchecked')
);

render(
  <Toggle defaultChecked/>,
  document.getElementById('toggle-checked')
);

render(
  <Toggle disabled/>,
  document.getElementById('toggle-unchecked-disabled')
);

render(
  <Toggle disabled defaultChecked/>,
  document.getElementById('toggle-checked-disabled')
);

render(
  <Toggle pale/>,
  document.getElementById('pale-toggle-unchecked')
);

render(
  <Toggle pale defaultChecked/>,
  document.getElementById('pale-toggle-checked')
);

render(
  <Toggle pale disabled/>,
  document.getElementById('pale-toggle-unchecked-disabled')
);

render(
  <Toggle pale disabled defaultChecked/>,
  document.getElementById('pale-toggle-checked-disabled')
);

render(
  <Toggle>Label</Toggle>,
  document.getElementById('with-label')
);