Text fields let users enter and edit text.
<input type="text" placeholder="outlined" class="basic-textfield-outlined" id="basic-outlined">
<input type="text" placeholder="Filled" class="basic-textfield-filled" id="basic-filled">
<input type="text" placeholder="Standard" class="basic-textfield-standard" id="basic-standard">
<input type="text" placeholder="required" class="basic-textfield-outlined" id="basic-outlined" required>
<input type="text" placeholder="disabled" class="basic-textfield-outlined" id="basic-disabled-outlined" disabled>
<input type="text" placeholder="read only" class="basic-textfield-outlined" id="basic-readonly-outlined" readonly>
<input type="password" placeholder="password" class="basic-textfield-outlined" id="basic-password-outlined">
<input type="number" placeholder="number" class="basic-textfield-outlined" id="basic-number-outlined">
<input type="search" placeholder="search" class="basic-textfield-outlined" id="basic-search-outlined">
<span class="help-block">
<input type="text" placeholder="helper text" class="basic-textfield-outlined" id="basic-helpertext-outlined">
<small class="helper-text-block">Helper text</small>
</span>
<input type="text" placeholder="required" class="basic-textfield-filled" id="basic-filled" required>
<input type="text" placeholder="disabled" class="basic-textfield-filled" id="basic-disabled-filled" disabled>
<input type="text" placeholder="read only" class="basic-textfield-filled" id="basic-readonly-filled" readonly>
<input type="password" placeholder="password" class="basic-textfield-filled" id="basic-password-filled">
<input type="number" placeholder="number" class="basic-textfield-filled" id="basic-number-filled">
<input type="search" placeholder="search" class="basic-textfield-filled" id="basic-search-filled">
<span class="help-block">
<input type="text" placeholder="helper text" class="basic-textfield-filled" id="basic-helpertext-filled">
<small class="helper-text-block">Helper text</small>
</span>
<input type="text" placeholder="required" class="basic-textfield-standard" id="basic-standard" required>
<input type="text" placeholder="disabled" class="basic-textfield-standard" id="basic-disabled-standard" disabled>
<input type="text" placeholder="read only" class="basic-textfield-standard" id="basic-readonly-standard" readonly>
<input type="password" placeholder="password" class="basic-textfield-standard" id="basic-password-standard">
<input type="number" placeholder="number" class="basic-textfield-standard" id="basic-number-standard">
<input type="search" placeholder="search" class="basic-textfield-standard" id="basic-search-standard">
<span class="help-block">
<input type="text" placeholder="helper text" class="basic-textfield-standard" id="basic-helpertext-standard">
<small class="helper-text-block">Helper text</small>
</span>
<input type="text" placeholder="outlined" class="basic-textfield-outlined error-outlined" id="basic-outlined">
<input type="text" placeholder="filled" class="basic-textfield-filled error-filled" id="basic-filled">
<input type="text" placeholder="standard" class="basic-textfield-standard error-standard" id="basic-standard">
<span class="help-block">
<input type="text" placeholder="helper text" class="basic-textfield-outlined error-outlined" id="basic-helpertext-outlined">
<small class="helper-text-block error-text">Helper text</small>
</span>
<span class="help-block">
<input type="text" placeholder="helper text" class="basic-textfield-filled error-filled" id="basic-helpertext-filled">
<small class="helper-text-block error-text">Helper text</small>
</span>
<span class="help-block">
<input type="text" placeholder="helper text" class="basic-textfield-standard error-standard" id="basic-helpertext-standard">
<small class="helper-text-block error-text">Helper text</small>
</span>
<div class="basic-textfield-outlined textfield-label">
<label for="textfield-label-outlined">Outlined</label>
<input type="text" name="outlined" id="basic-outlined" class="filled-color">
</div>
<div class="basic-textfield-filled textfield-label">
<label for="textfield-label-filled">Filled</label>
<input type="text" name="filled" id="basic-filled" class="filled-color">
</div>
<div class="basic-textfield-standard textfield-label">
<label for="textfield-label-standard">Standard</label>
<input type="text" name="standard" id="basic-standard" class="filled-color">
</div>
<div class="basic-textfield-outlined textfield-label error-outlined">
<label for="textfield-label-outlined">Outlined</label>
<input type="text" name="outlined" id="basic-outlined" class="filled-color">
<small class="helper-text-block error-text label-error">Helper text</small>
</div>
<div class="basic-textfield-filled textfield-label error-filled">
<label for="textfield-label-filled">Filled</label>
<input type="text" name="filled" id="basic-filled" class="filled-color">
<small class="helper-text-block error-text label-error">Helper text</small>
</div>
<div class="basic-textfield-standard textfield-label error-standard">
<label for="textfield-label-standard">Standard</label>
<input type="text" name="standard" id="basic-standard" class="filled-color">
<small class="helper-text-block error-text label-error">Helper text</small>
</div>