counter
The Counter allows a user to increase or decrease a numerical value.
About Counter
A Counter is a Form Element containing a label and a number Input that can be increased or decreased using companion Button Icons.
Accessibility
To ensure the Counter is fully accessible, follow all guidelines for Button Icons and the error state on Inputs.
Base
<div class="slds-form-element">
<label class="slds-form-element__label slds-m-right_none" for="default1">Counter Label</label>
<div class="slds-form-element__control">States
Required
<div class="slds-form-element">
<label class="slds-form-element__label slds-m-right_none" for="state-required">
<abbr class="slds-required" title="required">* </abbr>Counter Label</label>Error
This field is required
<div class="slds-form-element slds-has-error">
<label class="slds-form-element__label slds-m-right_none" for="state-error">
<abbr class="slds-required" title="required">* </abbr>Counter Label</label>Disabled
<div class="slds-form-element">
<label class="slds-form-element__label slds-m-right_none" for="state-disabled">Counter Label</label>
<div class="slds-form-element__control">Read-only
<div class="slds-form-element">
<label class="slds-form-element__label slds-m-right_none" for="state-read-only">Counter Label</label>
<div class="slds-form-element__control">Examples
Centered
<div class="slds-form-element slds-text-align_center">
<label class="slds-form-element__label slds-m-right_none" for="example-centered">Counter Label</label>
<div class="slds-form-element__control">