Checkbox

Checkbox

<h1>Base Examples</h1>
<div id="checkbox-base">
  <span id="checkbox"></span>
  <span id="checkbox-selected"></span>
</div>

<h1>Disabled checkboxes</h1>
<div id="checkbox-base">
  <span id="checkbox-disabled"></span>
  <span id="checkbox-disabled-selected"></span>
</div>

<h1>Examples with outer styles</h1>
<div id="checkbox-additional">
  <div style="line-height: 60px">
    <span id="checkbox-in-large-line-height-div"></span>
    <span>This text should be aligned on same line with checkbox label</span>
  </div>
  <div style="line-height: 6px;">
    <span id="checkbox-in-small-line-height-div"></span>
    <span>This text should be aligned on same line with checkbox label</span>
  </div>
  <div style="line-height: 48px; font-size: 40px">
    <span id="checkbox-in-large-font-div"></span>
    <span>This text should be aligned on same line with checkbox label</span>
  </div>
  <div style="line-height: 6px; font-size: 4px">
    <span id="checkbox-in-small-font-div"></span>
    <span>This text should be aligned on same line with checkbox label</span>
  </div>
</div>

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

render(<Checkbox />, document.getElementById('checkbox'));

render(
  <Checkbox defaultChecked/>,
  document.getElementById('checkbox-selected')
);

render(
  <Checkbox disabled/>,
  document.getElementById('checkbox-disabled')
);

render(
  <Checkbox disabled defaultChecked/>,
  document.getElementById('checkbox-disabled-selected')
);

render(
  <Checkbox
    defaultChecked
  >This checkbox is inside a div with large line-height.</Checkbox>,
  document.getElementById('checkbox-in-large-line-height-div')
);

render(
  <Checkbox
    defaultChecked
  >This checkbox is inside a div with small line-height.</Checkbox>,
  document.getElementById('checkbox-in-small-line-height-div')
);

render(
  <Checkbox
    defaultChecked
  >This checkbox is inside a div with large font-size.</Checkbox>,
  document.getElementById('checkbox-in-large-font-div')
);

render(
  <Checkbox
    defaultChecked
  >This checkbox is inside a div with small font-size.</Checkbox>,
  document.getElementById('checkbox-in-small-font-div')
);