Form fields
Mobile28 components208 variants5 recreations
Mobile form fields with error and success states, each paired with the right iOS or Android keyboard.
$9, or included with Pro
Date, time and calendars (Mobile)
Mobile packActions and input
Mobile date and time pickers: wheels, month calendars, booking ranges, time slots, week strips, durations, time zones and repeats.
- components
- 12
- variants
- 35
- recreations
- 4
- themes
- 5
Also for desktop: Date, time and calendars
What’s inside
12 date and time patterns for phone apps: wheel pickers, inline and scrolling month calendars, booking ranges, a compact date button, time slots, a week strip, duration, time zone, repeat rule, sleep timer and date of birth. Seven are shown inside a bottom sheet in context. components use UK date formats, and each page has notes and a live grid in light and dark, comfortable and compact.
- Wheel picker for date, time and countdown
- Check-in to check-out booking range on a month calendar
- 4 recreations from stays, payments, booking and calendar apps
Wheel picker
Free sample6 variants
- Date
- Time
- Countdown
- Default
- Focus
Inline month calendar
4 variants
- Default
- Selected
- Focus
- Unavailable
Booking range
3 variants
- Check-in
- Check-out
- Done
Compact date button
3 variants
- Closed
- Date open
- Time open
Time slots
2 variants
- Grid
- Scroll row
Week strip
3 variants
- Days
- With events
- Next week
Month scroll
2 variants
- None
- Range
Duration picker
2 variants
- Wheels
- Presets
Time zone picker
2 variants
- List
- Searching
Repeat rule
2 variants
- Presets
- Custom
Sleep timer
2 variants
- Choose
- Running
Date of birth picker
4 variants
- Wheel
- Typed
- Default
- Invalid
- Figma file
- SuperDuper Pack: Date, time and calendars (Mobile)
- Themes
- Light, Dark, Light high contrast, Dark high contrast and Wireframe
- Densities
- Comfortable and Compact
- Also in the file
- Usage and accessibility notes, motion specs, Figma variables
- Covers 2 UI elements and 1 screen pattern
- Date picker, Time picker and Booking & date selection
How Airbnb, Revolut and Calendly and others do it
Recreations of real products, so you can compare approaches side by side. They are approximate, built from public product knowledge, with placeholder data and no third-party artwork.
Stays dates
Recreated from Airbnb
Payment date wheel
Recreated from Revolut
Booking slots
Recreated from Calendly
Week strip agenda
Recreated from Fantastical
Not affiliated with, endorsed or sponsored by Airbnb, Revolut, Calendly and Fantastical. Their names are trade marks of their owners and are used only to say what each recreation is based on.
See the wheel picker full size, free
A wheel picker in date, time and countdown modes, each in default and focus states. All 6 variants, free to see with a SuperDuperUI account. The Figma file comes with the pack.
More actions and input packs
Selection controls
Mobile19 components216 variants3 recreations
Mobile switches, checkboxes, radios, sliders, steppers, ratings and swatches, each with every state drawn and documented.
$9, or included with Pro
Chips, tags and badges
Mobile12 components40 variants3 recreations
Mobile chips and badges: filter, choice, input, action and category chips, plus status, count, dot and verified badges.
$9, or included with Pro
Questions about the date, time and calendars pack
One Figma file: SuperDuper Pack: Date, time and calendars (Mobile). It has 12 components with 35 variants, 4 recreations, and notes on when to use each part. Everything uses Figma variables, so you can change the colours and type to match your product.