Base Form Elements

<div class="input-field">
  <input id="input_text" type="text" class="validate" placeholder="Placeholder">
  <label for="input_text">Text Field</label>
</div>

<div class="input-field align-right">
  <input id="input_text_ra" type="text" class="validate">
  <label for="input_text_ra">Right Aligned</label>
</div>

<div class="input-field align-center">
  <input id="input_text_ca" type="text" class="validate">
  <label for="input_text_ca">Center Aligned</label>
</div>

<div class="input-field">
  <input id="input_disabled" type="text" class="validate" disabled>
  <label for="input_disabled">Disabled Text Field</label>
</div>

<div class="input-field">
  <input id="input_password" type="password" class="validate">
  <label for="input_password">Password</label>
</div>

<div class="input-field">
  <input id="input_email" type="email" class="validate">
  <label for="input_email">Email</label>
</div>

<div class="input-field">
  <textarea id="textarea1" class="materialize-textarea"></textarea>
  <label for="textarea1">Textarea</label>
</div>

<div class="input-field align-right">
  <textarea id="textarea_ra" class="materialize-textarea"></textarea>
  <label for="textarea_ra">Textarea Right Aligned</label>
</div>

<div class="input-field align-center">
  <textarea id="textarea_ra" class="materialize-textarea"></textarea>
  <label for="textarea_ra">Textarea Center Aligned</label>
</div>

<div class="input-field">
  <i class="mdi-action-thumb-up prefix"></i>
  <input id="input_text_icon" type="text" class="validate">
  <label for="input_text_icon">Text Field with Icon</label>
</div>

<div class="input-field">
  <i class="mdi-communication-chat prefix"></i>
  <textarea id="textarea_icon" class="materialize-textarea"></textarea>
  <label for="textarea_icon">Textarea with Icon</label>
</div>

<select>
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select class="browser-default">
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select class="browser-default align-right">
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select disabled>
  <option value="" selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select class="browser-default" disabled>
  <option value="" selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select multiple>
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<select multiple>
  <option value="" disabled selected>Choose option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

One

Two

Three

<p>
  <input name="radios1" type="radio" id="radios1-1" checked />
  <label for="radios1-1">One</label>
</p>
<p>
  <input name="radios1" type="radio" id="radios1-2" />
  <label for="radios1-2">Two</label>
</p>
<p>
  <input name="radios1" type="radio" id="radios1-3" disabled />
  <label for="radios1-3">Three</label>
</p>

One

Two

Three

<p>
  <input class="with-gap" name="radios2" type="radio" id="radios2-1" checked />
  <label for="radios2-1">One</label>
</p>
<p>
  <input class="with-gap" name="radios2" type="radio" id="radios2-2" />
  <label for="radios2-2">Two</label>
</p>
<p>
  <input class="with-gap" name="radios2" type="radio" id="radios2-3" disabled />
  <label for="radios2-3">Three</label>
</p>

One

Two

Filled In

Three

Four

<p>
  <input type="checkbox" id="checkbox1" />
  <label for="checkbox1">One</label>
</p>
<p>
  <input type="checkbox" id="checkbox2" checked="checked" />
  <label for="checkbox2">Two</label>
</p>
<p>
  <input type="checkbox" class="filled-in" id="checkbox3" checked="checked" />
  <label for="checkbox3">Filled In</label>
</p>
<p>
  <input type="checkbox" id="checkbox4" checked="checked" disabled="disabled" />
  <label for="checkbox4">Three</label>
</p>
<p>
  <input type="checkbox" id="checkbox5" disabled="disabled" />
  <label for="checkbox5">Four</label>
</p>

One

Two

Three

<p class="switch">
  <label>
    <input type="checkbox" />
    <span class="lever"></span>
    One
  </label>
</p>
<p class="switch">
  <label>
    <input type="checkbox" checked />
    <span class="lever"></span>
    Two
  </label>
</p>
<p class="switch">
  <label>
    <input type="checkbox" />
    <span class="lever"></span>
    Three
  </label>
</p>

<!-- Ratings with Stars -->
<div class="rating">
  <input type="radio" id="rating-star-5" name="rating-star" value="5">
  <label for="rating-star-5"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-4" name="rating-star" value="4">
  <label for="rating-star-4"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-3" name="rating-star" value="3" checked>
  <label for="rating-star-3"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-2" name="rating-star" value="2">
  <label for="rating-star-2"><i class="ion-star"></i></label>
  <input type="radio" id="rating-star-1" name="rating-star" value="1">
  <label for="rating-star-1"><i class="ion-star"></i></label>
</div>
<!-- /Ratings with Stars -->

<br>
<!-- Ratings with Sun -->
<div class="rating">
  <input type="radio" id="rating-5" name="rating" value="5">
  <label for="rating-5"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-4" name="rating" value="4">
  <label for="rating-4"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-3" name="rating" value="3">
  <label for="rating-3"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-2" name="rating" value="2">
  <label for="rating-2"><i class="wi wi-day-sunny"></i></label>
  <input type="radio" id="rating-1" name="rating" value="1" checked>
  <label for="rating-1"><i class="wi wi-day-sunny"></i></label>
</div>
<!-- Ratings with Sun -->

<div class="file-field input-field">
  <div class="btn">
    <span>File</span>
    <input type="file">
  </div>
  <div class="file-path-wrapper">
    <input class="file-path validate" type="text">
  </div>
</div>