Number input: code & specs

This page documents the expected code output and structure necessary to display number inputs correctly in the UI.

Number input base code

The base number input relies on a specific HTML structure and set of CSS classes to render correctly.

The example below outlines the two key elements required to create a basic number input. The .input class acts as the wrapper and contains the .input-label and .response sections. This structure ensures consistent styling and behaviour across all number input variants.

To differentiate this input type from others, the .num-input class is added in the .response container.

In addition, the number input requires two input action buttons inside the .response class to trigger incremental and decremental values.

Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="exampleNumberInput" class="form-label">Example number input</label>
    </div>

    <div class="response num-input">
        <input type="text" class="form-control" id="exampleNumberInput">
        <button type="button" class="input-btn step-btn step-add"><i class="fa-regular fa-plus" aria-hidden="true"></i></button>
        <button type="button" class="input-btn step-btn step-minus"><i class="fa-regular fa-minus" aria-hidden="true"></i></button>
    </div>
</div>

Size

For a small input add the .form-control-sm class.

Small input pending

Supporting items

Assistive / helper text

Use <small class="form-helper"></small> to include both assistive and helper text within a number input.

Place assistive text inside the .input-label, directly beneath the <label>, and place helper text underneath the .response section.

Assistive text
Helper text
Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="exampleNumberInputHelper" class="form-label">Example number input</label>
        <small class="form-helper">
            Assistive text
        </small>
    </div>

    <div class="response num-input">
        <input type="text" class="form-control" id="exampleNumberInputHelper">
        <button type="button" class="input-btn step-btn step-add"><i class="fa-regular fa-plus" aria-hidden="true"></i></button>
        <button type="button" class="input-btn step-btn step-minus"><i class="fa-regular fa-minus" aria-hidden="true"></i></button>
    </div>

    <small class="form-helper">
        Helper text
    </small>
</div>

Icons

An input icon is placed within the .response container directly above the .form-control.

Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="exampleNumberInputIcon" class="form-label">Input with icon</label>
    </div>

    <div class="response num-input">
        <i class="input-icon fa-regular fa-sterling-sign"></i>
        <input type="text" class="form-control" id="exampleNumberInputIcon">
        <button type="button" class="input-btn step-btn step-add"><i class="fa-regular fa-plus" aria-hidden="true"></i></button>
        <button type="button" class="input-btn step-btn step-minus"><i class="fa-regular fa-minus" aria-hidden="true"></i></button>
    </div>
</div>

Validation

Buckholt includes built-in HTML form validation, applied via CSS’s two pseudo-classes: :invalid and :valid. Buckholt scopes these styles to a parent .was-validated class, which is usually applied to the <form>. This ensures required fields don’t display as invalid on initial page load. Instead, you can control when validation styles appear – typically after the user attempts to submit the form.

To reset the form’s appearance – for example, after submitting via Ajax – remove the .was-validated class from the <form>.

As a fallback, the .is-invalid class can be used for server-side validation. Unlike the pseudo-classes, it doesn’t require a .was-validated parent.

Validation error messages should be placed at the very bottom of the .input container and use the .invalid-feedback class.

Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="exampleNumberInputValidation" class="form-label">Input with icon</label>
    </div>

    <div class="response num-input">
        <i class="input-icon fa-regular fa-sterling-sign"></i>
        <input type="text" class="form-control" id="exampleNumberInputValidation">
        <button type="button" class="input-btn step-btn step-add"><i class="fa-regular fa-plus" aria-hidden="true"></i></button>
        <button type="button" class="input-btn step-btn step-minus"><i class="fa-regular fa-minus" aria-hidden="true"></i></button>
    </div>

    <small class="form-helper">
        Helper text
    </small>

    <div class="invalid-feedback">
        Validation error message
    </div>
</div>

States

Disabled

To disable a number input add the disabled attribute to the <input>.

Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="exampleDisabledInput" class="form-label">Example disabled input</label>
    </div>

    <div class="response num-input">
        <input type="text" class="form-control" id="exampleDisabledInput" disabled>
        <button type="button" class="input-btn step-btn step-add"><i class="fa-regular fa-plus" aria-hidden="true"></i></button>
        <button type="button" class="input-btn step-btn step-minus"><i class="fa-regular fa-minus" aria-hidden="true"></i></button>
    </div>
</div>

Read only

To make a number input read only, add the readonly attribute to the <input>.

Validation message
html 
<div class="input">
    <div class="input-label">
        <label for="exampleReadonlyInput" class="form-label">Example read only input</label>
    </div>

    <div class="response num-input">
        <input type="text" class="form-control" id="exampleReadonlyInput" readonly>
        <button type="button" class="input-btn step-btn step-add"><i class="fa-regular fa-plus" aria-hidden="true"></i></button>
        <button type="button" class="input-btn step-btn step-minus"><i class="fa-regular fa-minus" aria-hidden="true"></i></button>
    </div>
</div>