Forms

Text inputs

Text inputs must be inside objects with class col , inside objects with class row .

<div class="row">
  <div class="col s12">
    <input type="text" placeholder="type your text here">
  </div>
</div>

As well as placing an input next to another, follow the model described below.

Input 1

Input 2

<div class="row">
  <div class="col s6">
    <p class="label">Input 1</p>
    <input type="text">
  </div>
  <div class="col s6">
    <p class="label">Input 2</p>
    <input type="text">
  </div>
</div>

Select input

The select object is also 100% wide. To scale it, use the column structure.

Select 1

Select 2

<div class="row">
  <div class="col s6">
    <p class="label">Select 1</p>
    <select>
      <option selected disabled>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
  <div class="col s6">
    <p class="label">Select 2</p>
    <select>
      <option selected disabled>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
  </div>
</div>

Checkbox input

The input with type checkbox must be inside an object with class col and must be accompanied by an object p with class label .

Select 1

Select 1

Select 1

<div class="row">
  <div class="col s12 m4">
    <input type='checkbox'>
    <p class="label">Select 1</p>
  </div>
  <div class="col s12 m4">
    <input type='checkbox' checked>
    <p class="label">Select 1</p>
  </div>
  <div class="col s12 m4">
    <input type='checkbox' disabled>
    <p class="label">Select 1</p>
  </div>
</div>