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>
Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus. Lorem ipsum dolor sit amet o mecius alcnat le nuc ainstor mictrus.