# 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
Remember me?

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

Option 1 Option 2 Option 3 Option 4

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

Checkbox 1 Checkbox 2 Checkbox 3 Checkbox 4

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