Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

seb logo

Stepper

A stepper makes it easier to input values that are in a narrow range.

Stepper

Available in

Component meta

Component identifier

component-stepper

Design version

2020-09-01

Design principles

Everyday first

Guidelines

Short description

A stepper is useful when you create a form with numeric inputs that are in a narrow range.

Stepper

When and how to use it

Use it for entering numeric values quickly in a form, for example; how many children in a family.

Behaviour

The inserted value can be increased or decreased by “1” or an other configured digit via the “-/+“ buttons. The user is also able to increase or decrease a value by the arrows on the keyboard. Up and Right is for increasing, Down and Left to decrease.

Do's and don'ts

Do
  • Do use it for small values, such as amount of children in a family.
Don't
  • We have learned not to use it to enter years or salary. A dropdown has a better usability.

 

Accessibility

Review

Result from the latest accessibility review of the component (Chlorophyll): 2024-08-02

  • Contrast: ok
  • Colour-blindness: ok
  • Code + aria: ok
  • Touch + keyboard: ok
  • Dark-mode: n/a
  • Focus: ok
  • Reader: ok

 

Specification

 

Related patterns & components

Pattern
Form design

Page last updated

Feedback

Was this helpful?