<label class="form-label">Form Label</label>
<input type="text" class="form-input" name="name" placeholder="Input placeholder text" />
<span class="form-help-text">This is help text for a form</span>

<!-- Disabled -->
<label class="form-label">Disabled Input</label>
<input type="text" class="form-input" disabled name="name" placeholder="Disabled" />

<!-- Error -->
<label for="error-input" class="form-label">Error Label</label>
<input type="text" class="form-input has-error" name="error-input" placeholder="This is not correct">
<span class="form-help-text has-error">This is not correct.</span>

<!-- Success -->
<label for="success-input" class="form-label">Success Label</label>
<input type="text" class="form-input has-success" name="success-input" placeholder="This is correct">
<span class="form-help-text has-success">This is correct.</span>

<!-- Warning -->
<label for="warning-input" class="form-label">Warning Label</label>
<input type="text" class="form-input has-warning" name="warning-input" placeholder="This is a warning">
<span class="form-help-text has-warning">This is a warning.</span>