Components
Every control.
On every platform.
58 components for macOS, iPadOS and iOS. Each one is a ui-sdk part with Apple’s metrics, materials and motion, and changes its idiom with the platform it runs on.
- ButtonRun an action. Bezeled, filled, tinted, plain and glass push buttons for every platform.
- ToggleA button that stays pressed until you press it again, alone or in a group.
- SwitchTurn a setting on or off.
- CheckboxTurn an option on or off, or choose several from a list.
- RadioChoose one option from a small set of mutually exclusive choices.
- Segmented ControlChoose one of a few closely related options, or switch between views.
- SliderChoose a value, or a range, from a continuous or stepped scale.
- StepperChange a number by small, fixed steps, with or without a field to type it.
- RatingGive a score from a row of stars, or show one.
- Color WellShow a color and open an editor to change it.
- FieldGive a control a label, a description and an error, stacked or side by side as in macOS forms.
- Text FieldEnter a single line of text: a bordered field on macOS, a filled one on iOS, with a clear button and adornments.
- Search FieldSearch a list, a board or the whole app with Apple's search field: magnifier, prompt and clear button.
- Secure FieldEnter a password as dots, with an eye button that shows it when you need to read it.
- Text AreaEnter several lines of text in a field that grows as you type.
- Code FieldEnter a one-time code in separate rounded cells, with the active cell ringed in the accent.
- Token FieldEnter people, tags or addresses as rounded tokens tinted with the accent, as in Mail's address fields.
- Date PickerType a date, step it, or pick it from a calendar in a popover, or a sheet on a phone.
- CalendarApple's graphical date picker: a month title with chevrons, a weekday row and circular days, for one date or a range.
- MenuShow a list of commands and settings from a button.
- Context MenuOffer actions for the thing under the pointer or finger.
- Menu BarEvery command in your app, in menus along the top of the screen.
- Pop-Up ButtonChoose one option, or several, from a menu of choices.
- Combo BoxType a value or choose one from a list of suggestions.
- Command PaletteSearch for an app, a document or a command and run it from the keyboard.
- AlertAsk a question that needs an answer before work continues: the system alert and the iOS action sheet.
- DialogGive a focused task its own space: a centered panel on the Mac, a form sheet on iPad and a page sheet on iPhone.
- SheetThe iOS bottom sheet with a grabber and detents, and inspector panels along the edge on iPad and Mac.
- PopoverShow a small task or more detail beside the control it belongs to, with an arrow that points back at it.
- TooltipThe macOS help tag: a few words about a control when the pointer rests on it.
- Hover CardPreview where a link goes when the pointer rests on it, without leaving the page.
- NotificationTell people something happened: macOS notifications at the top right, banners at the top of the screen on iPhone and iPad.
- WindowFrame a Mac app in a window with a title bar, traffic lights, sidebar and toolbar.
- Device FramePresent an iPhone or iPad layout inside a page.
- SidebarMove between an app's top-level places from a source list on Mac and iPad.
- ToolbarPut a window's most-used commands in its title bar, or float them over an iPhone screen.
- Navigation BarShow where you are in an app's hierarchy, with a back button, a title and actions.
- Tab BarSwitch between the top-level sections of an iOS or iPadOS app.
- TabsSwitch between related views that share the same space, as a macOS tab view.
- Split ViewShow a sidebar, content and an inspector side by side, with dividers people can drag.
- DockLaunch and switch between apps from a glass shelf of icons that grow under the pointer.
- Page ControlShow how many pages there are and which one is on screen, as a row of dots.
- ListRows of settings, navigation and choices, grouped the way iOS Settings and macOS System Settings group them.
- TableRows of data in columns, with sortable headers and row selection, like a macOS table view.
- OutlineBrowse a hierarchy in rows that expand, like Finder's list view.
- DisclosureShow and hide content under a row whose chevron turns, like SwiftUI's DisclosureGroup.
- CardGroup related content in a container: a macOS group box, or an iOS widget-like card.
- AvatarA person's photo with a monogram fallback, or the rounded square of an app or a team.
- ArtworkAbstract pictures drawn from a seed, for covers, headers and placeholders.
- SquircleApple's continuous corner: a curve that eases into the straight edge, for app icons, tiles and cards.
- BadgeThe red notification count from app icons and tab bars, and small capsule labels in system colors.
- SeparatorA hairline between groups of content, horizontal or vertical, with an optional label.
- Scroll ViewScroll content with Apple's overlay scroll bars and edges that fade while there's more to see.
- CarouselPage through cards that snap into place, with the next one peeking in.
- ProgressThe thin Apple progress bar, its indeterminate sweep, and a circular ring for downloads.
- Activity IndicatorThe Apple spinner: eight spokes that light in turn around the circle while something loads.
- GaugeA reading in a range: the macOS level indicator, a linear capacity bar, and the circular gauge from watchOS and iOS widgets.
- GlassTranslucent materials for chrome, and Liquid Glass for controls that float over content.