Checkbox

<div class="drac-box">
  <input
    type="checkbox"
    name="normal"
    id="normal"
    class="drac-checkbox drac-checkbox-purple"
    checked=""
  /><label for="normal" class="drac-text drac-text-white"
    >Enjoys the light</label
  >
</div>

<Box>
  <Checkbox id="normal" name="normal" color="purple" defaultChecked={true} />
  <label htmlFor="normal" className="drac-text drac-text-white">
    Enjoys the light
  </label>
</Box>;

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

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

<div style="display: flex; flex-direction: column" class="drac-box">
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="one"
      disabled=""
      id="one"
      class="drac-checkbox drac-checkbox-white"
      checked=""
    /><label for="one" class="drac-text drac-text-white">Vampire</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="checkbox"
      name="two"
      disabled=""
      id="two"
      class="drac-checkbox drac-checkbox-white"
    /><label for="two" class="drac-text drac-text-white">Human</label>
  </div>
</div>

<Box style={{ display: "flex", flexDirection: "column" }}>
  <Box mb="xs">
    <Checkbox
      id="one"
      name="one"
      color="white"
      defaultChecked={true}
      disabled={true}
    />
    <label htmlFor="one" className="drac-text drac-text-white">
      Vampire
    </label>
  </Box>
  <Box mb="xs">
    <Checkbox id="two" name="two" color="white" disabled={true} />
    <label htmlFor="two" className="drac-text drac-text-white">
      Human
    </label>
  </Box>
</Box>;