Number input
Examples
Base
<chi-label for="example-1">Label</chi-label>
<chi-number-input id="example-1"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="input-example-base">Label</label>
<div class="chi-number-input">
<input id="input-example-base" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-base'));</script>
Disabled
Use the disabled
boolean attribute to prevent users from interacting with an input.
Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.
Note: The required attribute can not be used on inputs with a disabled attribute specified.
<chi-label for="example-2">Label</chi-label>
<chi-number-input disabled id="example-2"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="input-example-disabled">Label</label>
<div class="chi-number-input">
<input id="input-example-disabled" type="number" class="chi-input" value="0" aria-label="Input Label" disabled>
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-disabled'));</script>
Min/Max/Step
Use the min
and max
attributes to define minimum and maximum values on number inputs.
Use the step
attribute to indicate the expected granularity.
This example only accepts values between 1
and 6
, and as the step
is
2
and initial value
is 1
, only odd values are valid.
Use the chiNumberInvalid
event described in the events section
to check if the entered value is valid.
<chi-label for="unique-id-mms1">Label</chi-label>
<chi-number-input id="unique-id-mms1" min="1" max="6" step="2" value="1"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="unique-id-mms1">Label</label>
<div class="chi-number-input">
<input id="unique-id-mms1" type="number" class="chi-input" min="0" max="6" step="2" value="1" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>
chi.numberInput(
document.getElementById('unique-id-mms1'),
{autofix: true}
);
</script>
Required
Use the required
boolean attribute to indicate which inputs must be completed before submitting a form.
To render a required input, apply the required
attribute to the input. It is also
encouraged but not mandatory to apply a required
attribute to the corresponding label of the input which
will automatically render a red asterisk. Note: For HTML Blueprint implementations,
the required
attribute is not supported on the label. Please use the alternate method
specified below for rendering a red asterisk within the label.
<chi-label for="unique-id-re1" required>Label</chi-label>
<chi-number-input id="unique-id-re1" required></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="unique-id-re1">
Label
<abbr class="chi-label__required" aria-label="Required field">*</abbr>
</label>
<div class="chi-number-input">
<input id="unique-id-re1" type="number" class="chi-input" value="0" aria-label="Input Label" required>
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('unique-id-re1'));</script>
Help
Use chi-label__help
to include a help icon that displays helpful information about an input in a popover.
A help icon must be contained within an icon button to ensure it receives focus when a user tabs through a form.
<div class="chi-label__wrapper">
<chi-label for="unique-id-he1">Label</chi-label>
<div class="chi-label__help">
<chi-button id="example__help-button" type="icon" size="xs" variant="flat" alternative-text="Help">
<chi-icon icon="circle-info-outline"></chi-icon>
</chi-button>
<chi-popover id="example__help-popover" position="top" variant="text" arrow reference="#example__help-button">
Helpful information goes here.
</chi-popover>
</div>
</div>
<chi-number-input id="unique-id-he1"></chi-number-input>
<script>
document
.querySelector("#example__help-button")
.addEventListener("click", function () {
var popoverElem = document.querySelector("#example__help-popover");
popoverElem.toggle();
});
</script>
<div class="chi-form__item">
<div class="chi-label__wrapper">
<label class="chi-label" for="unique-id-he1">Label</label>
<div class="chi-label__help">
<div class="chi-button -icon -flat -xs" id="example__help-button" data-target="#example__help-popover" aria-label="Help">
<div class="chi-button__content">
<i class="chi-icon icon-circle-info-outline" aria-hidden="true"></i>
</div>
</div>
<section class="chi-popover chi-popover--top" id="example__help-popover" aria-modal="true" role="dialog">
<div class="chi-popover__content">
<p class="chi-popover__text">Helpful information goes here.</p>
</div>
</section>
</div>
</div>
<div class="chi-number-input">
<input id="unique-id-he1" type="number" class="chi-input" value="0" aria-label="Input Label" required>
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>
chi.numberInput(document.getElementById('unique-id-he1'));
chi.popover(document.getElementById('example__help-button'));
</script>
Message
Add a message below an input to store descriptions, validation feedback, and other helpful information.
<chi-label for="unique-id-me1">Label</chi-label>
<chi-number-input id="unique-id-me1" helper-message="Optional helper message"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="unique-id-me1">Label</label>
<div class="chi-number-input">
<input id="unique-id-me1" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
<div class="chi-label -status">Optional helper message</div>
</div>
<script>chi.numberInput(document.getElementById('unique-id-me1'));</script>
Error
Use danger
to provide feedback to users when input data fails to validate.
To meet accessibility requirements, danger inputs must include an error message explaining the
failure and/or how to correct it.
<chi-label for="unique-id-er1">Quantity</chi-label>
<chi-number-input id="unique-id-er1" inputstyle="danger" helper-message="Please enter a quantity"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="unique-id-er1">Quantity</label>
<div class="chi-number-input">
<input id="unique-id-er1" type="number" class="chi-input -danger" value="0" aria-label="Quantity">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
<div class="chi-label -status -danger">
<i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
Please enter a quantity
</div>
</div>
<script>chi.numberInput(document.getElementById('unique-id-er1'));</script>
Sizes
Number inputs support the following sizes: xs
, sm
, md
,
lg
, xl
. The default size is md
.
<!-- xs -->
<chi-label for="example-3-xs">Label</chi-label>
<chi-number-input size="xs" id="example-3-xs"></chi-number-input>
<!-- sm -->
<chi-label for="example-3-sm">Label</chi-label>
<chi-number-input size="sm" id="example-3-sm"></chi-number-input>
<!-- md -->
<chi-label for="example-3-md">Label</chi-label>
<chi-number-input size="md" id="example-3-md"></chi-number-input>
<!-- lg -->
<chi-label for="example-3-lg">Label</chi-label>
<chi-number-input size="lg" id="example-3-lg"></chi-number-input>
<!-- xl -->
<chi-label for="example-3-xl">Label</chi-label>
<chi-number-input size="xl" id="example-3-xl"></chi-number-input>
<!-- xs -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-xs">Label</label>
<div class="chi-number-input -xs">
<input id="input-example-xs" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-xs'));</script>
<!-- sm -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-sm">Label</label>
<div class="chi-number-input -sm">
<input id="input-example-sm" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-sm'));</script>
<!-- md -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-md">Label</label>
<div class="chi-number-input -md">
<input id="input-example-md" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-md'));</script>
<!-- lg -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-lg">Label</label>
<div class="chi-number-input -lg">
<input id="input-example-lg" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-lg'));</script>
<!-- xl -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-xl">Label</label>
<div class="chi-number-input -xl">
<input id="input-example-xl" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-xl'));</script>
Sizes
Number inputs support the following sizes: xs
, sm
, md
,
lg
. The default size is md
.
<!-- xs -->
<chi-label for="example-3-xs">Label</chi-label>
<chi-number-input size="xs" id="example-3-xs"></chi-number-input>
<!-- sm -->
<chi-label for="example-3-sm">Label</chi-label>
<chi-number-input size="sm" id="example-3-sm"></chi-number-input>
<!-- md -->
<chi-label for="example-3-md">Label</chi-label>
<chi-number-input size="md" id="example-3-md"></chi-number-input>
<!-- lg -->
<chi-label for="example-3-lg">Label</chi-label>
<chi-number-input size="lg" id="example-3-lg"></chi-number-input>
<!-- xs -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-xs">Label</label>
<div class="chi-number-input -xs">
<input id="input-example-xs" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-xs'));</script>
<!-- sm -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-sm">Label</label>
<div class="chi-number-input -sm">
<input id="input-example-sm" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-sm'));</script>
<!-- md -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-md">Label</label>
<div class="chi-number-input -md">
<input id="input-example-md" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-md'));</script>
<!-- lg -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-lg">Label</label>
<div class="chi-number-input -lg">
<input id="input-example-lg" type="number" class="chi-input" value="0" aria-label="Input Label">
<button aria-label="Decrease"></button>
<button aria-label="Increase"></button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-lg'));</script>
Expanded version
Base
<chi-label for="example-4">Label</chi-label>
<chi-number-input expanded id="example-4"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded">Label</label>
<div class="chi-number-input -expanded">
<input id="input-example-expanded" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content">
<i class="chi-icon icon-minus" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded'));</script>
Disabled
Use the disabled
boolean attribute to prevent users from interacting with an input.
Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.
Note: The required attribute can not be used on inputs with a disabled attribute specified.
<chi-label for="example-5">Label</chi-label>
<chi-number-input expanded disabled id="example-5"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-disabled">Label</label>
<div class="chi-number-input -expanded">
<input id="input-example-expanded-disabled" class="chi-input" type="number" value="0" aria-label="Input Label" disabled>
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content">
<i class="chi-icon icon-minus" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-disabled'));</script>
Min/Max/Step
Use the min
and max
attributes to define minimum and maximum values on number inputs.
Use the step
attribute to indicate the expected granularity.
This example only accepts values between 0
and 6
, and as the step
is
2
and initial value
is 1
, only odd values are valid.
Use the chiNumberInvalid
event described in the events section
to check if the entered value is valid.
<chi-label for="unique-id-emm1">Label</chi-label>
<chi-number-input expanded id="unique-id-emm1" min="1" max="6" step="2" value="1"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="unique-id-emm1">Label</label>
<div class="chi-number-input -expanded">
<input id="unique-id-emm1" class="chi-input" type="number" min="0" max="6" "step="2" value="1" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content">
<i class="chi-icon icon-minus" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>
chi.numberInput(
document.getElementById('unique-id-emm1'),
{autofix: true}
);
</script>
Error
Use danger
to provide feedback to users when input data fails to validate.
To meet accessibility requirements, danger inputs must include an error message explaining the
failure and/or how to correct it.
<chi-label for="unique-id-eer1">Quantity</chi-label>
<chi-number-input expanded id="unique-id-eer1" inputstyle="danger" helper-message="Please enter a quantity"></chi-number-input>
<div class="chi-form__item">
<label class="chi-label" for="unique-id-eer1">Label</label>
<div class="chi-number-input -expanded">
<input id="unique-id-eer1" class="chi-input -danger" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content">
<i class="chi-icon icon-minus" aria-hidden="true"></i>
</div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content">
<i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
<div class="chi-label -status -danger">
<i class="chi-icon icon-circle-warning" aria-hidden="true"></i>
Please enter a quantity
</div>
</div>
<script>chi.numberInput(document.getElementById('unique-id-eer1'));</script>
Sizes
Expanded number inputs support the following sizes: xs
, sm
, md
,
lg
, xl
. The default size is md
.
<!-- xs -->
<chi-label for="example-6-xs">Label</chi-label>
<chi-number-input expanded size="xs" id="example-6-xs"></chi-number-input>
<!-- sm -->
<chi-label for="example-6-sm">Label</chi-label>
<chi-number-input expanded size="sm" id="example-6-sm"></chi-number-input>
<!-- md -->
<chi-label for="example-6-md">Label</chi-label>
<chi-number-input expanded size="md" id="example-6-md"></chi-number-input>
<!-- lg -->
<chi-label for="example-6-lg">Label</chi-label>
<chi-number-input expanded size="lg" id="example-6-lg"></chi-number-input>
<!-- xl -->
<chi-label for="example-6-xl">Label</chi-label>
<chi-number-input expanded size="xl" id="example-6-xl"></chi-number-input>
<!-- xs -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-xs">Label</label>
<div class="chi-number-input -expanded -xs">
<input id="input-example-expanded-xs" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xs'));</script>
<!-- sm -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-sm">Label</label>
<div class="chi-number-input -expanded -sm">
<input id="input-example-expanded-sm" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-sm'));</script>
<!-- md -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-md">Label</label>
<div class="chi-number-input -expanded -md">
<input id="input-example-expanded-md" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-md'));</script>
<!-- lg -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-lg">Label</label>
<div class="chi-number-input -expanded -lg">
<input id="input-example-expanded-lg" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-lg'));</script>
<!-- xl -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-xl">Label</label>
<div class="chi-number-input -expanded -xl">
<input id="input-example-expanded-xl" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xl'));</script>
Sizes
Expanded number inputs support the following sizes: xs
, sm
, md
,
lg
. The default size is md
.
<!-- xs -->
<chi-label for="example-6-xs">Label</chi-label>
<chi-number-input expanded size="xs" id="example-6-xs"></chi-number-input>
<!-- sm -->
<chi-label for="example-6-sm">Label</chi-label>
<chi-number-input expanded size="sm" id="example-6-sm"></chi-number-input>
<!-- md -->
<chi-label for="example-6-md">Label</chi-label>
<chi-number-input expanded size="md" id="example-6-md"></chi-number-input>
<!-- lg -->
<chi-label for="example-6-lg">Label</chi-label>
<chi-number-input expanded size="lg" id="example-6-lg"></chi-number-input>
<!-- xs -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-xs">Label</label>
<div class="chi-number-input -expanded -xs">
<input id="input-example-expanded-xs" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-xs'));</script>
<!-- sm -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-sm">Label</label>
<div class="chi-number-input -expanded -sm">
<input id="input-example-expanded-sm" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i>
</div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-sm'));</script>
<!-- md -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-md">Label</label>
<div class="chi-number-input -expanded -md">
<input id="input-example-expanded-md" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-md'));</script>
<!-- lg -->
<div class="chi-form__item">
<label class="chi-label" for="input-example-expanded-lg">Label</label>
<div class="chi-number-input -expanded -lg">
<input id="input-example-expanded-lg" class="chi-input" type="number" value="0" aria-label="Input Label">
<button class="chi-button -icon" aria-label="Decrease">
<div class="chi-button__content"><i class="chi-icon icon-minus" aria-hidden="true"></i></div>
</button>
<button class="chi-button -icon" aria-label="Increase">
<div class="chi-button__content"><i class="chi-icon icon-plus" aria-hidden="true"></i></div>
</button>
</div>
</div>
<script>chi.numberInput(document.getElementById('input-example-expanded-lg'));</script>
Web Component
Properties
Events
JavaScript
This component accepts options to configure its behavior.
Preventing memory leaks
Input number components have a dispose function to free all resources attached to the element, such as event listeners and object data. You should call this method when you want to remove the component.
var elem = document.getElementById('input-number-1');
var inputNumberComponent = chi.numberInput(elem);
// do stuff
inputNumberComponent.dispose();
TipIt is safe to call the numberInput
method more than once, as it will return any previously created
number input component associated to the input.
var elem = document.getElementById('input-number-1');
var inputNumberComponent = chi.numberInput(elem);
var elem2 = document.getElementById('input-number-1');
var inputNumberComponent2 = chi.numberInput(elem2);
inputNumberComponent === inputNumberComponent2; // returns true
inputNumberComponent.dispose(); // Only have to do it once.
Accessibility
Keyboard Navigation
Key | Function |
---|---|
Tab | Moves focus to the next focusable element. |
Shift + Tab | Moves focus to the previous focusable element. |
Up Arrow orShift +Up Arrow | Increases the value. |
Down Arrow orShift +Down Arrow | Decreases the value. |
Enter | Submits the entered value. |
For comprehensive details on keyboard support, refer to our Keyboard Control Guide.
Visit WebAIM for keyboard techniques.
Find live examples of accessible inputs with different types in DigitalA11y project.
Resources
- Mozilla Resources for Developers: Information about the HTML
input-type="number"
- A11y style guide: Describes core principles for the accessible inputs and textarea.
- MagentaA11y: How to test a number input.
Other recommendations
Explore additional accessibility tips in the general Accessibility Guide.
WCAG 2.2 Guidelines
- Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
- Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
- Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)