Switches

Switches represent Yes/No choices.

You can learn more about switches here.

This switch is interactive. It defaults to "On"
This switch is interactive. It defaults to "Off"
Show accessibility labels by choosing Current Value for the Button's Text setting.
Adjust the "tint" colors using the Normal and Active appearance settings.
Sliders

Sliders represent a value within a fixed range.

You can learn more about sliders here.

0% Slider
50% Slider
100% Slider
Adjust the "tint" colors using the Min Track, Max Track and Thumb appearance settings:
Buttons

Buttons trigger actions.

You can learn more about buttons here.

Normal button
Disabled button
Details / Info button
Add button
Bar buttons:
Icons:
Adjust the "tint" using the Text Color appearance setting.
Segmented Controls

A segmented control contains several distinct buttons.

You can learn more about segmented controls here.

This control is interactive. Change the segments by editing the values of the attached state.
Normal
Active
Disabled
Use these building blocks to create custom segmented controls.
Adjust the "tint" color using the Normal, Active and Touch appearance settings.
Steppers

Steppers increment and decrement a value.

You can learn more about steppers here.

1
This stepper is interactive.
Change the stepper's range by editing the values of the attached state, the Active Value of the "+" button, and the Visibility of the "+" link.
Use these - and + building blocks to create custom steppers.
Adjust the "tint" color using the Normal and Touch appearance.
Labels & Fields

A text field allows the user to enter text.

You can learn more about text fields here.

Normal label and text field:
Label
Label
The "clear" button area is 38pt wide. The button, if enabled, is only visible when there is text in the field.
Disabled label and text field:
Label
Activity Indicators

Activity indicators communicate the status of a task.

You can learn more about activity indicators here.

Large activity indicator
Small activity indicator
Status bar activity indicator
Adjust the "tint" color using the Stroke Color appearance setting.
Progress Views

Progress views communicate the status of a task.

You can learn more about progress views here.

10% Progress
50% Progress
90% Progress
Adjust the "tint" colors using the Track and Progress lines' Stroke Color appearance settings:
Page Controls

Page controls present a set of screens as separate pages.

You can learn more about page controls here.

This page control is interactive.
Change the number of pages by editing the values of the attached state, and adjusting the width.
The indicators are 7pt wide, with 9pt of spacing between them.
Use these active and incative building blocks to create custom page controls.
Adjust the "tint" color using the Normal and Active appearace settings.
Map Views
This stencil simulates a map view with a large, static image of a map. You can resize it up to 1024 x 1024.
iOS Map
Text Selection, Copy & Paste
Lorem ipsum dolor sit er elit lamet, consectataur cillium adipisicing.
Lorem ipsum dolor sit er elit lamet, consectataur cillium adipisicing.
Date & Time Pickers

Date pickers select a date and/or time. Note: These stencils only approximate the complex 3D effect used in iOS 7.

You can learn more about date pickers here.

Pickers can select a date:
October
November
December
January
February
March
April
30
31
1
2
3
4
5
2011
2012
2013
2014
2015
2016
2017
… or a time:
8
9
10
11
12
1
2
57
58
59
00
01
02
03
AM
PM
… or both at once:
Mon Dec
30
Tues Dec
31
Wed Jan
1
Thu Jan
2
Fri Jan
3
Sat Jan
4
Sun Jan
5
8
9
10
11
12
1
2
57
58
59
00
01
02
03
AM
PM
Today
Today
Today
Today
Today
Today
Today
Note: The current day appears as "Today" in the date-and-time picker. Use these cells to get the correct alignment.
You can also select a time interval:
8
9
10
11
12
13
14
hours
57
58
59
0
1
2
3
min

You can also create custom pickers for other values:

Chico
Mountain View
Sunnyvale
Cupertino
Santa Clara
San Jose
Santa Rosa
These pickers are sized for a phone in portrait orientation. For other sizes, center the tumblers in the available space.