Radio

<div class="drac-box">
  <input
    type="radio"
    name="normal"
    id="normal"
    class="drac-radio drac-radio-purple"
    checked=""
  /><label for="normal" class="drac-text drac-text-white">Likes Garlic</label>
</div>

<Box>
  <Radio id="normal" name="normal" color="purple" defaultChecked={true} />
  <label htmlFor="normal" className="drac-text drac-text-white">
    Likes Garlic
  </label>
</Box>;

<div class="drac-box">
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="white"
      id="white"
      class="drac-radio drac-radio-white"
    /><label for="white" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="cyan"
      id="cyan"
      class="drac-radio drac-radio-cyan"
    /><label for="cyan" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="green"
      id="green"
      class="drac-radio drac-radio-green"
    /><label for="green" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="orange"
      id="orange"
      class="drac-radio drac-radio-orange"
    /><label for="orange" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="pink"
      id="pink"
      class="drac-radio drac-radio-pink"
    /><label for="pink" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="purple"
      id="purple"
      class="drac-radio drac-radio-purple"
    /><label for="purple" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="red"
      id="red"
      class="drac-radio drac-radio-red"
    /><label for="red" class="drac-text drac-text-white">Radio</label>
  </div>
  <div class="drac-box drac-mb-xs">
    <input
      type="radio"
      name="yellow"
      id="yellow"
      class="drac-radio drac-radio-yellow"
    /><label for="yellow" class="drac-text drac-text-white">Radio</label>
  </div>
</div>

<Box>
  <Box mb="xs">
    <Radio id="white" color="white" name="white" />
    <label htmlFor="white" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="cyan" color="cyan" name="cyan" />
    <label htmlFor="cyan" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="green" color="green" name="green" />
    <label htmlFor="green" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="orange" color="orange" name="orange" />
    <label htmlFor="orange" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="pink" color="pink" name="pink" />
    <label htmlFor="pink" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="purple" color="purple" name="purple" />
    <label htmlFor="purple" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="red" color="red" name="red" />
    <label htmlFor="red" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
  <Box mb="xs">
    <Radio id="yellow" color="yellow" name="yellow" />
    <label htmlFor="yellow" className="drac-text drac-text-white">
      Radio
    </label>
  </Box>
</Box>;

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

<Box>
  <Box mb="xs">
    <Radio
      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">
    <Radio id="two" name="two" color="white" disabled={true} />
    <label htmlFor="two" className="drac-text drac-text-white">
      Human
    </label>
  </Box>
</Box>;