Magic has a simple way of styling text inputs:
<input type="text" class="input-default" placeholder="Default...">
<input type="text" class="input-red" placeholder="Red...">
<input type="text" class="input-green" placeholder="Green...">
<input type="text" class="input-yellow" placeholder="Yellow...">
<input type="text" class="input-blue" placeholder="Blue...">
<input type="text" class="input-dark" placeholder="Dark...">
<input type="text" class="input-light" placeholder="Light...">
Similarly to Bootstrap, you can create input groups:
<div class="input-group">
<div class="input-addon">
<span>@</span>
</div>
<input type="text" class="input-default">
</div>
<div class="input-group">
<div class="input-addon">
<span>@</span>
</div>
<div class="input-addon">
<span>Required</span>
</div>
<input type="text" class="input-default">
<div class="input-addon">
<span>Password</span>
</div>
<div class="input-addon">
<span>Required</span>
</div>
<input type="text" class="input-default">
<div class="input-addon">
<input type="checkbox" id="check">
<label for="check">Remember me?</label>
</div>
<button class="btn btn-default input-addon">Go!</button>
</div>
Magic has styled radio buttons:
<div class="radio-group">
<input type="radio" id="r1" name="radio" class="red" checked>
<label for="r1" class="radio-label">Option 1</label>
<input type="radio" name="radio" id="r2" class="blue">
<label for="r2" class="radio-label">Option 2</label>
<input type="radio" name="radio" id="r3" class="green">
<label for="r3" class="radio-label">Option 3</label>
<input type="radio" name="radio" id="r4" class="default">
<label for="r4" class="radio-label">Option 4</label>
</div>
Magic also has styled checkboxes:
<div class="check-group">
<input id="c1" type="checkbox" class="red" checked>
<label for="c1" class="check-label">Checkbox 1</label>
<input id="c2" type="checkbox" class="blue">
<label for="c2" class="check-label">Checkbox 2</label>
<input id="c3" type="checkbox" class="green">
<label for="c3" class="check-label">Checkbox 3</label>
<input id="c4" type="checkbox" class="default">
<label for="c4" class="check-label">Checkbox 4</label>
</div>
Submit buttons can be given the class btn or btn-grad to be styled nicely:
<input type="submit" class="btn btn-default">
<input type="submit" class="btn btn-outline btn-default">
<input type="submit" class="btn-grad btn-grad-blue">