Switch

<div class="drac-box">
  <input
    type="checkbox"
    name="demo"
    id="demo"
    class="drac-switch drac-checkbox drac-switch-purple"
    checked=""
  /><label for="demo" class="drac-text drac-text-white">Has reflection</label>
</div>

<Box>
  <Switch color="purple" id="demo" name="demo" defaultChecked={true} />
  <label htmlFor="demo" className="drac-text drac-text-white">
    Has reflection
  </label>
</Box>;

<div style="display: flex; flex-direction: column" class="drac-box">
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="white"
      class="drac-switch drac-checkbox drac-switch-white"
      checked=""
    /><label for="white" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="cyan"
      class="drac-switch drac-checkbox drac-switch-cyan"
      checked=""
    /><label for="cyan" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="green"
      class="drac-switch drac-checkbox drac-switch-green"
      checked=""
    /><label for="green" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="orange"
      class="drac-switch drac-checkbox drac-switch-orange"
      checked=""
    /><label for="orange" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="pink"
      class="drac-switch drac-checkbox drac-switch-pink"
      checked=""
    /><label for="pink" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="purple"
      class="drac-switch drac-checkbox drac-switch-purple"
      checked=""
    /><label for="purple" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="red"
      class="drac-switch drac-checkbox drac-switch-red"
      checked=""
    /><label for="red" class="drac-text drac-text-white">Switch</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="demo"
      id="yellow"
      class="drac-switch drac-checkbox drac-switch-yellow"
      checked=""
    /><label for="yellow" class="drac-text drac-text-white">Switch</label>
  </div>
</div>

<Box style={{ display: "flex", flexDirection: "column" }}>
  <Box mb="xs">
    <Switch id="white" defaultChecked={true} color="white" name="demo" />
    <label htmlFor="white" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="cyan" defaultChecked={true} color="cyan" name="demo" />
    <label htmlFor="cyan" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="green" defaultChecked={true} color="green" name="demo" />
    <label htmlFor="green" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="orange" defaultChecked={true} color="orange" name="demo" />
    <label htmlFor="orange" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="pink" defaultChecked={true} color="pink" name="demo" />
    <label htmlFor="pink" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="purple" defaultChecked={true} color="purple" name="demo" />
    <label htmlFor="purple" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="red" defaultChecked={true} color="red" name="demo" />
    <label htmlFor="red" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
  <Box mb="xs">
    <Switch id="yellow" defaultChecked={true} color="yellow" name="demo" />
    <label htmlFor="yellow" className="drac-text drac-text-white">
      Switch
    </label>
  </Box>
</Box>;

<div class="drac-box">
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="one"
      disabled=""
      id="one"
      class="drac-switch drac-checkbox drac-switch-white"
      checked=""
    /><label for="one" class="drac-text drac-text-white">Vampire</label>
  </div>
  <div class="drac-box">
    <input
      type="checkbox"
      name="two"
      disabled=""
      id="two"
      class="drac-switch drac-checkbox drac-switch-white"
    /><label for="two" class="drac-text drac-text-white">Human</label>
  </div>
</div>

<Box>
  <Box mb="xs">
    <Switch
      id="one"
      disabled={true}
      defaultChecked={true}
      color="white"
      name="one"
    />
    <label htmlFor="one" className="drac-text drac-text-white">
      Vampire
    </label>
  </Box>
  <Box>
    <Switch id="two" disabled={true} color="white" name="two" />
    <label htmlFor="two" className="drac-text drac-text-white">
      Human
    </label>
  </Box>
</Box>;