Forms

Form controls with consistent styling, validation states, and accessibility features.

Form Controls

Text inputs, textareas, selects with consistent styling

We'll never share your email. 
<form>
    <div class="antsand-form-group">
        <label class="antsand-form-label">Email Address</label>
        <input type="email" class="antsand-form-control" placeholder="you@example.com">
        <small class="antsand-form-text">Helper text here.</small>
    </div>

    <div class="antsand-form-group">
        <label class="antsand-form-label">Message</label>
        <textarea class="antsand-form-control" rows="4"></textarea>
    </div>

    <div class="antsand-form-check">
        <input type="checkbox" id="agree">
        <label for="agree">I agree</label>
    </div>

    <button type="submit" class="antsand-btn antsand-btn-primary">Submit</button>
</form>

Validation States

Valid and invalid states with feedback messages

Looks good!
Please provide a valid input.
<!-- Valid State -->
<div class="antsand-form-group">
    <label class="antsand-form-label">Valid Input</label>
    <input type="text" class="antsand-form-control is-valid" value="Correct">
    <div class="antsand-valid-feedback">Looks good!</div>
</div>

<!-- Invalid State -->
<div class="antsand-form-group">
    <label class="antsand-form-label">Invalid Input</label>
    <input type="text" class="antsand-form-control is-invalid">
    <div class="antsand-invalid-feedback">Please fix this.</div>
</div>

Available Classes