User interface (UI) elements are the blocks we use to build apps or websites. They add interactivity to a user interface, providing touchpoints for the users as they navigate their way around: buttons, app bar, menu items, error messages and checkboxes.

When creating your app, you’ll use UI elements to create a visual language and ensure consistency across your product—making it user-friendly and easy to navigate without too much thought when users interact. This is how you will create a better application.

Here are the main UI elements you should know about. This list is not exhaustive but you’ll find great ideas and inspiration for your next app project.

There are lots of UI kits available online for download. A UI kit is a set of files that contains critical UI components like fonts, layered design files, icons, and design components. There are several formats depending on the software you use for prototyping (Adobe XD, Sketch, Illustrator, Figma…).

Apple and Google provide UI resources for designing great apps that integrate seamlessly with their platforms:

iOS Human Interface Guidelines
UI Guidelines for Android

User input

User Interface (UI) Elements for your Application

Checkbox

A checkbox allows users to select one or multiple options from a list.

radio button

Radio buttons

Radio buttons allow the user to select one option from a set.

User Interface (UI) Elements for your Application

Toggle / Switch

These are for binary options. It toggles the state of a single item on or off.

text field

Text fields

Text fields let users enter and edit text. It can be one single or multiple lines.

User Interface (UI) Elements for your Application

Buttons

Buttons allow users to take actions, and make choices, with a single tap. They usually are displayed as shapes with a label.

drop down

Drop-down list

It allows users to select an item from a list that “drops down” once we click on it.

form

Forms

Forms help users input sets of related data into the system and submit them.

search bar

Search bar

Search bar are specific input fields to search or filter items.

Utils

toast

Toast

Toast displays a notification over the top of an app’s content. User can dismiss it by tapping anywhere outside of it.

User Interface (UI) Elements for your Application

Modal/Pop-up

A small box containing content that requires you to interact with it before you can close it and return to your flow.

User Interface (UI) Elements for your Application

Popover

A popover can be used to display some content on top of another.

loader

Loaders

Loaders are designed to let users know the system is completing an action in the background and should wait.

Content

accordion

Accordion

Accordions let users expand and collapse sections of content.

User Interface (UI) Elements for your Application

Carousel

Carousels allow users to browse through sets of content, like images or cards, often linked to more content or sources.

User Interface (UI) Elements for your Application

Pagination

Often at the bottom of a page, pagination organizes content into pages

slider

Slider

Sliders allow users to make selections from a range of values.

List

User Interface (UI) Elements for your Application

Grid list

Grid lists display a collection of images in an organized grid.

list

List

It consists of one element following another whether alphabetically, numerically or even randomly.

item

Item

An item is an element of a list.

card

Card

A card displays content in a manner similar to a playing card.

Navigation

icons

Icons

Icons help to better communicate content, or can communicate and trigger a specific action.

User Interface (UI) Elements for your Application

Tabs

Tabs organize content across different screens, data sets, and other interactions.

menu

Menu

To navigate within your app, there are several types of menu: all of their names are food related.

breadcrumb

Breadcrumb

Breadcrumbs let users see their current location and show the hierarchy of content.

progress bar

Progress bar

Progress bars help users visualize where they are in a series of steps.

side bar

Side bar

A sidebar displays a group of navigational actions or content literally on the side of a page.

tab bar

Tab bar

Tab bars appear at the bottom of a mobile app and allow users to quickly move back between the main sections of an app.

User Interface (UI) Elements for your Application

Build apps and interactive experiences without any coding.

Sign up free
User Interface (UI) Elements for your Application

Build apps and interactive experiences without any coding.

Sign up free