USER INTERFACE ELEMENTS
Counter
Overview
Counters are intended for use in mobile, conversational UI contexts to add interactivity to an experience. Counter controls allow users to input a value into the field by either typing or selecting using the +/–. Data entered using the mobile-friendly touch targets (+/–) has an animated scroll effect for added visual interest.
Specifications
Counter Controls
These controls allow users to enter and increase or decrease data by tapping. Users can also enter text directly into the field by clicking on it and using the keyboard.
Filled
- Outer Circle Border Color: #6E6E6E
- Outer Circle Border Size: 2px
- Icon Color: #333333
- Counter Border Color: #6E6E6E
- Counter Border Size: 2px
- Text Color: #333333
- Text: Noto Sans 16px Bold
Active
- Outer Circle Border Color: #6E6E6E
- Outer Circle Border Size: 2px
- Icon Color: #333333
- Counter Border Color: #6E6E6E
- Counter Border Size: 2px
- Text Color: #333333
- Text: Noto Sans 16px Bold
Error
- Outer Circle Border Color: #6E6E6E
- Outer Circle Border Size: 2px
- Icon Color: #333333
- Counter Border Color: #6E6E6E
- Counter Border Size: 2px
- Text Color: #333333
- Text: Noto Sans 16px Bold
- Caption Color: #D42123
- Caption Text: Noto Sans 12px Regular
Disabled (+)
- Outer Circle Border Color: #6E6E6E
- Outer Circle Border Size: 2px
- Disabled Outer Circle Border Color: #6E6E6E
- Disabled Fill: #D9D9D6
- Disabled Icon Color: #333333
- Disabled Opacity: 50%
- Icon Color: #333333
- Counter Border Color: #707070
- Counter Border Size: 2px
- Text Color: #333333
- Text: Noto Sans 16px Bold
Disabled (-)
- Outer Circle Border Color: #6E6E6E
- Outer Circle Border Size: 2px
- Disabled Outer Circle Border Color: #6E6E6E
- Disabled Fill: #D9D9D6
- Disabled Icon Color: #333333
- Disabled Opacity: 50%
- Icon Color: #333333
- Counter Border Color: #707070
- Counter Border Size: 2px
- Text Color: #333333
- Text: Noto Sans 16px Bold
Usage Guidelines
Scenario: Multi-Label Selector (with static field label)
