Form

Magic has several custom styles for versatile form components.


Text input

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...">
Inputs displayed side-by-side for demonstration. They are typically block elements with 100% width.

Input groups

Similarly to Bootstrap, you can create input groups:

@
@
Required
Password
Required
<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>

Radio inputs

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>

Checkbox inputs

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

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">