Forms

Input de texto

Os inputs tipo texto devem estar dentro de objetos com classe col, dentro de objetos com classe row.

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

Assim como para colocar um input ao lado de outro, siga o modelo descrito abaixo.

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

O objeto select também tem 100% de largura. Para dimensioná-lo, use a estrutura em colunas.

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

O input com tipo checkbox deve estar dentro de um objeto com classe col e deve estar acompanhado por um objeto p com classe 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>