Back to Numeric Stepper-guidelines

CSS ComponentThe latest version of this package is: 14.1.0, Opens in new window

Bundle

This component provides .css, .styl, .less and .scss -files.

To be able to install this component, please refer to the Project Setup documentation.

$ npm i @ids-core/Numeric Stepper@14.1.0

18 + 18 +
The number of bedrooms in your house
< 18

Table of Contents

Edit this section, Opens in new window

Usage

Required markup

18 + 18 +
<div class="if numeric-stepper">
  <button aria-label="Remove 1" class="if down" type="button"></button>
  <input aria-live="polite" class="if" id="<identifier>" max="9" min="0" name="<identifier>" type="number" value="2" />
  <label class="if" for="<identifier>">Adults</label>
  <span class="if input-help">18 +</span>
  <span class="if input-error">18 +</span>
  <button aria-label="Add 1" class="if up" type="button"></button>
</div>

Disabled

18 +
<div class="if numeric-stepper">
  <button disabled type="button" class="if down" aria-label="Remove 1"></button>
  <input
    type="number"
    id="numeric-stepper-adults-0121"
    name="numeric-stepper-adults-0121"
    class="if"
    value="2"
    disabled
    max="9"
    min="0"
    aria-live="polite"
  />
  <label for="numeric-stepper-adults-0121" class="if">
    Adults
  </label>
  <span class="if input-help">18 +</span>
  <button type="button" class="if up" aria-label="Add 1"></button>
</div>

Large

Use the class .large to get a larger numeric stepper.

A bathroom does not count towards the total number of rooms in the apartment Error
<div class="if numeric-stepper large">
  <div class="if numeric-wrapper">
    <button type="button" class="if down" aria-label="Remove 1"></button>
    <input
      type="number"
      id="<identifier>"
      name="<identifier>"
      class="if"
      value="1"
      max="9"
      min="0"
      aria-live="polite"
    />
    <button type="button" class="if up" aria-label="Add 1"></button>
  </div>
  <label for="<identifier>" class="if"> How many rooms does the apartment have? </label>
  <span class="if input-help">A bathroom does not count towards the total number of rooms in the apartment</span>
  <span class="if input-error">Error</span>
</div>
Edit this section, Opens in new window

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

14.0.4 (2021-11-15)

Bug Fixes

  • Several fixes reported by Monta (8619659)

14.0.0 (2021-11-09)

chore

  • ๐Ÿค– Rename util to utils (f78721f)

Code Refactoring

  • ๐Ÿ’ก Rename scope and repository (3ea5423)
  • ๐Ÿ’ก Use new navigation structure for documentation (415aee5), closes #490579

Documentation

  • โœ๏ธ Split out CSS and JS documentation (9dd9bc3), closes #467386
  • โœ๏ธ Update links and change navigation structure (0bfd27d), closes #490579

BREAKING CHANGES

  • ๐Ÿงจ The scope for If Design System npm packages has now changed from

@if-design-system to @ids-core. We have also renamed the repository from if-design-system to ids-core

  • ๐Ÿงจ Util is now renamed to Utils
  • ๐Ÿงจ We have now changed the navigation structure for the documentation site.

Please update any saved links!

  • ๐Ÿงจ Navigation structure has now changed. Please see release notes!
  • ๐Ÿงจ The JS script is moved to separate package: @ids-js/numeric-stepper

13.11.0 (2021-10-19)

Features

  • ๐ŸŽธ Input field hot reload (eac76b7)

13.10.1 (2021-10-07)

Bug Fixes

  • ๐Ÿ› Do not use String.fromCharCode when using e.key (3485743)

13.6.3 (2021-09-17)

Bug Fixes

13.5.1 (2021-09-07)

Bug Fixes

12.13.1 (2021-08-11)

Bug Fixes

  • ๐Ÿ› Whitelist docs dir for npm packaging (1a5cfd0), closes #457621

12.12.1 (2021-08-10)

Bug Fixes

  • ๐Ÿ› Make sure components using fonts, have fonts bundled (d5bb642), closes #354912

12.6.0 (2021-05-27)

Bug Fixes

  • ๐Ÿ› Manually set firstPublished and lastModified (e83af7d)
  • ๐Ÿ› We don't need lastModified (e458a12)

12.0.0 (2021-05-05)

Code Refactoring

  • ๐Ÿ’ก Rename and consolidate mixins (67cf470), closes #268081
  • ๐Ÿ’ก Rename Notification to Alert Banner (8b4e48d), closes #336508

BREAKING CHANGES

  • ๐Ÿงจ All of the mixins have now been renamed
  • ๐Ÿงจ Notification is now renamed to Alert Banner
Edit this section, Opens in new window
Contact us, Opens in new window