Input Number
Input Number is an input component to provide numerical input.
When to use
- The number input component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
Guidelines
- Values in numeric inputs can be incremented or decremented using both keyboard and mouse interactions.
- Do not use number inputs when large value changes are expected. They work best for making small, incremental changes that require only a few clicks.
- Enable the user to also choose to type a number in the field.
- Ensure that a default value is shown within the field.
- Use a clear and concise label for the number input.
- When the number input is in focus, it should only accept numeric values.
- The validation message should be included to advise the user of numbers that are entered incorrectly or a required field that is missing.
Numeral
Different types of numeric inputs with minimum and maximum value sets.
Sizes
numeric-sm&numeric-lg classes are used for smaller and large size numeric inputs respectively.
Prefix
Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
<div class="row">
<div class="col-md-6 mb-3">
<label for="numberInput" class="form-label">Currency</label>
<input type="number" value="42732" class="prefix-wrapper" data-prefix="$" value="50" />
</div>
<div class="col-md-6 mb-3">
<label for="numberInput1" class="form-label">Percent</label>
<input type="number" data-prefix="%" class="prefix-wrapper" value="50" min="0" max="100" />
</div>
</div>
Buttons
Increment and decrement buttons are used to change the values for all numeric inputs.
<div class="row">
<div class="col-md-6 mb-3">
<label for="numberInput" class="form-label">Integer Only</label>
<input type="number" value="42732" />
</div>
<div class="col-md-6 mb-3">
<label for="numberInput3" class="form-label">Min-Max Boundaries</label>
<input type="number" value="500" min="0" max="1000" step="10" />
</div>
</div>
Accessibility
- The labels should be read out by a screen reader.
- Semantic HTML is enough for example.
<input type=”number”>
- Consider using the autocomplete attribute to help users complete forms.
- Add the min and max attributes if the range is provided.