{"abstract":[{"text":"A stepper is a two-segment control that people use to increase or decrease an incremental value.","type":"text"}],"hierarchy":{"paths":[["doc:\/\/com.apple.documentation\/documentation\/technologies","doc:\/\/com.apple.HIG\/design\/human-interface-guidelines","doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/components","doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/selection-and-input"]]},"identifier":{"interfaceLanguage":"swift","url":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/steppers"},"kind":"article","legalNotices":{"copyright":"Copyright © 2026 Apple Inc. All rights reserved.","privacyPolicy":"https:\/\/www.apple.com\/privacy\/privacy-policy","termsOfUse":"https:\/\/www.apple.com\/legal\/internet-services\/terms\/site.html"},"metadata":{"availableLanguages":["en-US","zh-CN","ja-JP","ko-KR"],"customMetadata":{"supported-platforms":"ios,ipados,macos,visionos"},"images":[{"identifier":"components-steppers-thumbnail.png","type":"card"}],"role":"article","title":"Steppers"},"primaryContentSections":[{"content":[{"inlineContent":[{"identifier":"components-stepper-intro.png","type":"image"}],"type":"paragraph"},{"inlineContent":[{"text":"A stepper sits next to a field that displays its current value, because the stepper itself doesn’t display a value.","type":"text"}],"type":"paragraph"},{"anchor":"Best-practices","level":2,"text":"Best practices","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"Make the value that a stepper affects obvious.","type":"text"}],"type":"strong"},{"text":" A stepper itself doesn’t display any values, so make sure people know which value they’re changing when they use a stepper.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"inlineContent":[{"text":"Consider pairing a stepper with a text field when large value changes are likely.","type":"text"}],"type":"strong"},{"text":" Steppers work well by themselves for making small changes that require a few taps or clicks. By contrast, people appreciate the option to use a field to enter specific values, especially when the values they use can vary widely. On a printing screen, for example, it can help to have both a stepper and a text field to set the number of copies.","type":"text"}],"type":"paragraph"},{"anchor":"Platform-considerations","level":2,"text":"Platform considerations","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"No additional considerations for iOS, iPadOS, or visionOS. Not supported in watchOS or tvOS.","type":"text"}],"type":"emphasis"}],"type":"paragraph"},{"anchor":"macOS","level":3,"text":"macOS","type":"heading"},{"inlineContent":[{"inlineContent":[{"text":"For large value ranges, consider supporting Shift-click to change the value quickly.","type":"text"}],"type":"strong"},{"text":" If your app benefits from larger changes in a stepper’s value, it can be useful to let people Shift-click the stepper to change the value by more than the default increment (by 10 times the default, for example).","type":"text"}],"type":"paragraph"},{"anchor":"Resources","level":2,"text":"Resources","type":"heading"},{"anchor":"Related","level":4,"text":"Related","type":"heading"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/pickers","isActive":true,"type":"reference"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/text-fields","isActive":true,"type":"reference"}],"type":"paragraph"},{"anchor":"Developer-documentation","level":4,"text":"Developer documentation","type":"heading"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UIStepper","isActive":true,"type":"reference"},{"text":" — UIKit","type":"text"}],"type":"paragraph"},{"inlineContent":[{"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSStepper","isActive":true,"type":"reference"},{"text":" — AppKit","type":"text"}],"type":"paragraph"}],"kind":"content"}],"schemaVersion":{"major":0,"minor":3,"patch":0},"sections":[],"topicSectionsStyle":"compactGrid","references":{"components-pickers-thumbnail.png":{"alt":"A stylized representation of a selected item in a scrollable list. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-pickers-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-pickers-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-pickers-thumbnail~dark@2x.png"}]},"components-selection-and-input-thumbnail.png":{"alt":"A stylized representation of a calendar in month view, suggesting selection and input. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-selection-and-input-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-selection-and-input-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-selection-and-input-thumbnail~dark@2x.png"}]},"components-stepper-intro.png":{"alt":"A stylized representation of a stepper control. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-stepper-intro.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-stepper-intro@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-stepper-intro~dark@2x.png"}]},"components-steppers-thumbnail.png":{"alt":"A stylized representation of a stepper control. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-steppers-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-steppers-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-steppers-thumbnail~dark@2x.png"}]},"components-text-fields-thumbnail.png":{"alt":"A stylized representation of a text field containing a value. The image is tinted red to subtly reflect the red in the original six-color Apple logo.","identifier":"components-text-fields-thumbnail.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components-text-fields-thumbnail@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components-text-fields-thumbnail~dark@2x.png"}]},"components.png":{"alt":"","identifier":"components.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/components@2x.png"},{"traits":["2x","dark"],"url":"\/images\/com.apple.HIG\/components~dark@2x.png"}]},"doc://com.apple.HIG/design/Human-Interface-Guidelines/components":{"abstract":[{"text":"Learn how to use and customize system-defined components to give people a familiar and consistent experience.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/components","images":[{"identifier":"overview.svg","type":"icon"},{"identifier":"components.png","type":"card"}],"kind":"article","role":"collectionGroup","title":"Components","type":"topic","url":"\/design\/human-interface-guidelines\/components"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/pickers":{"abstract":[{"text":"A picker displays one or more scrollable lists of distinct values that people can choose from.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/pickers","images":[{"identifier":"components-pickers-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Pickers","type":"topic","url":"\/design\/human-interface-guidelines\/pickers"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/selection-and-input":{"abstract":[],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/selection-and-input","images":[{"identifier":"selection-and-input.svg","type":"icon"},{"identifier":"components-selection-and-input-thumbnail.png","type":"card"}],"kind":"article","role":"collectionGroup","title":"Selection and input","type":"topic","url":"\/design\/human-interface-guidelines\/selection-and-input"},"doc://com.apple.HIG/design/Human-Interface-Guidelines/text-fields":{"abstract":[{"text":"A text field is a rectangular area in which people enter or edit small, specific pieces of text.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/Human-Interface-Guidelines\/text-fields","images":[{"identifier":"components-text-fields-thumbnail.png","type":"card"}],"kind":"article","role":"article","title":"Text fields","type":"topic","url":"\/design\/human-interface-guidelines\/text-fields"},"doc://com.apple.HIG/design/human-interface-guidelines":{"abstract":[{"text":"The HIG contains guidance and best practices that can help you design a","type":"text"},{"text":" ","type":"text"},{"text":"great experience for any Apple platform.","type":"text"}],"identifier":"doc:\/\/com.apple.HIG\/design\/human-interface-guidelines","images":[{"identifier":"human-interface-guidelines-page-image-card.png","type":"card"}],"kind":"article","role":"collection","title":"Human Interface Guidelines","type":"topic","url":"\/design\/human-interface-guidelines"},"doc://com.apple.documentation/documentation/AppKit/NSStepper":{"abstract":[{"text":"An interface with up and down arrow buttons for incrementing or decrementing a value.","type":"text"}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"identifier","text":"NSStepper"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/AppKit\/NSStepper","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"NSStepper"}],"role":"symbol","title":"NSStepper","type":"topic","url":"\/documentation\/appkit\/nsstepper"},"doc://com.apple.documentation/documentation/UIKit/UIStepper":{"abstract":[{"text":"A control for incrementing or decrementing a value.","type":"text"}],"fragments":[{"kind":"keyword","text":"class"},{"kind":"text","text":" "},{"kind":"identifier","text":"UIStepper"}],"identifier":"doc:\/\/com.apple.documentation\/documentation\/UIKit\/UIStepper","kind":"symbol","navigatorTitle":[{"kind":"identifier","text":"UIStepper"}],"role":"symbol","title":"UIStepper","type":"topic","url":"\/documentation\/uikit\/uistepper"},"doc://com.apple.documentation/documentation/technologies":{"abstract":[],"identifier":"doc:\/\/com.apple.documentation\/documentation\/technologies","kind":"technologies","role":"overview","title":"Technologies","type":"topic","url":"\/documentation\/technologies"},"human-interface-guidelines-page-image-card.png":{"alt":"An illustration of several Liquid Glass components such as toggles, sliders, and buttons, atop a neutral background. The transparent components cast shadows on the background and allow their colored elements, like a blue slider track and a green toggle backing, to show through, highlighting the Liquid Glass material's lensing effect.","identifier":"human-interface-guidelines-page-image-card.png","type":"image","variants":[{"traits":["2x","light"],"url":"\/images\/com.apple.HIG\/human-interface-guidelines-page-image-card@2x.png"}]},"overview.svg":{"alt":"An icon of a grid comprised of four squares.","identifier":"overview.svg","type":"image","variants":[{"svgID":"overview","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/overview.svg"}]},"selection-and-input.svg":{"alt":"An icon of a calendar in month view, suggesting selection and input.","identifier":"selection-and-input.svg","type":"image","variants":[{"svgID":"selection-and-input","traits":["1x","light"],"url":"\/images\/com.apple.HIG\/selection-and-input.svg"}]}},"variantOverrides":[{"patch":[{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1AppKit~1NSStepper\/fragments","value":[{"kind":"identifier","text":"NSStepper"}]},{"op":"replace","path":"\/references\/doc:~1~1com.apple.documentation~1documentation~1UIKit~1UIStepper\/fragments","value":[{"kind":"identifier","text":"UIStepper"}]}],"traits":[{"interfaceLanguage":"occ"}]}]}