list of UI elements
Here’s a comprehensive list of UI elements, grouped into categories, covering basic to advanced components used in modern web/mobile UIs.
1. Basic Input Controls
Used for collecting user data.
Text-based Inputs
Text Field
Password Field
Email Input
Number Input
Search Field
URL Input
Buttons
Primary / Secondary / Tertiary Button
Icon Button
Floating Action Button (FAB)
Selection Inputs
Radio Buttons
Checkboxes
Toggle Switch
Dropdown / Select Menu
Multi-select Dropdown
Date & Time Inputs
Date Picker
Time Picker
DateTime Picker
Calendar
2. Navigational Components
Help users navigate the interface.
Menus
Navigation Bar (Navbar)
Sidebar
Hamburger Menu
Context Menu (Right-click menu)
Breadcrumbs
Pagination
Tabs
Step Wizard / Progress Steps
Back/Next Buttons
Link/Hyperlink
3. Informational Components
Used to display content or status information.
Tooltips
Popovers
Banners
Notifications/Toasts
Badges
Chips/Pills
Progress Indicators
Linear Progress Bar
Circular Loader/Spinner
Skeleton Loader (Placeholder)
4. Containers & Layouts
Help organize and structure content.
Cards
Accordions
Modals/Dialogs
Drawers/Slide Panels
Panels/Sections
Grids & Flexbox Containers
Split View/Panes
5. Data Display Components
Used to present large sets of information.
Tables
Simple Table
Sortable Table
Filterable/Searchable Table
Lists
Ordered List
Unordered List
Interactive List (with icons/buttons)
Tree View
Data Grids
Charts & Graphs
Bar/Line/Pie/Area/Donut Charts
Heatmaps
Scatter Plots
Image Carousel/Slideshow
6. Media Elements
For visual and multimedia content.
Image
Video
Audio Player
Icons
Avatars
Background Images/Videos
7. Feedback & Interaction
Help users interact or confirm actions.
Confirmation Dialog
Alerts (Success, Error, Warning, Info)
Snackbars/Toast Notifications
Rating Stars
Like/Dislike Buttons
Captcha/ReCAPTCHA
8. Forms & Authentication
Used in login, signup, or surveys.
Login Form
Registration Form
Forgot Password
Multi-step Form
File Upload (Drag & Drop or Button)
Autocomplete/Typeahead
9. Advanced/Interactive Elements
More complex, often JavaScript-driven components.
Rich Text Editor (WYSIWYG)
Code Editor
Maps Integration
Chat Widget
Kanban Board
Calendar Scheduler
Infinite Scroll
Virtualized List
10. Miscellaneous
Breadcrumbs
Tags
Divider/Separator
Tooltip-trigger Elements
Floating Widgets
Complete UI Elements List (Category-Wise)
1. Basic Inputs & Controls
Used for user interaction and data entry.
Text Inputs
Text Field
Search Box with Suggestion
Multiline Text Area
Masked Input (Phone, Credit Card)
Selection
Radio Buttons (Horizontal/Vertical)
Checkboxes (Single/Grouped)
Switches/Toggles
Dropdown (Single/Multiple Select)
Combo Box
Date & Time
Date Picker
Time Picker
Date & Time Range Picker
Calendar with Events
Buttons
Primary / Secondary / Ghost / Link Button
Icon Button
Floating Action Button (FAB)
Button with Loading State
Split Button (Dropdown + Action)
File & Media Inputs
File Upload (Click)
Drag & Drop Upload
Image Upload Preview
Video Upload
2. Navigation
Helps users explore and move around.
Menus
Top Navigation Bar
Sidebar Navigation
Mega Menu
Context Menu (Right-click)
Dropdown Menu
Progression
Breadcrumbs
Pagination (Standard & Infinite Scroll)
Stepper/Wizard
Tabs
Horizontal Tabs
Vertical Tabs
Scrollable Tabs
Links
Text Link
Icon Link
Link with Tooltip
Floating Navigation
Sticky Header/Footer
Floating Navigation Buttons (Next/Back)
3. Informational Components
Displays information, tips, or system messages.
Tooltips (Static/Dynamic)
Popovers
Toast Notifications
Banners (Info, Warning, Success)
Badges (Number/Status Indicators)
Chips/Pills (With Icons, Closable)
Tags/Labels
Status Indicators (Online/Offline)
Skeleton Loader (Shimmer)
4. Layout & Containers
Structure and organize the interface.
Cards (Basic, Media, Expandable)
Accordions/Collapsible Panels
Modals/Dialogs (Alert, Confirmation, Form Modal)
Drawers/Slide Panels (Left/Right/Bottom)
Panels/Sections
Split Panes
Grid Systems
Masonry Layout
Docked Panels
5. Data Display
For presenting structured or visual data.
Tables
Basic
Sortable
Filterable
Paginated
Editable Tables
Lists
Static Lists
Interactive Lists (Checkbox/Action)
Virtualized Lists
Charts & Graphs
Line, Bar, Pie, Area, Donut
Heatmaps
Tree Maps
Bubble Charts
Gauge Charts
Other Displays
Image Carousel/Slideshow
Timeline
Kanban Board
Tree View/Hierarchy
6. Media Elements
Enhance visual engagement.
Images (Thumbnail, Responsive, Lazy Loaded)
Videos (Embedded, Fullscreen, Background)
Audio Player
Avatars (Single/Group)
Icons (SVG, Font Awesome, Material Icons)
7. Feedback & Interaction
Helps users take action or receive feedback.
Alerts (Error, Success, Warning, Info)
Confirmation Dialogs
Snackbars
Ratings & Reviews (Stars, Hearts)
Progress Bars (Linear, Circular, Indeterminate)
Loading Indicators (Spinners, Skeleton)
Captcha/ReCAPTCHA
Interactive Animations (Lottie, Confetti)
8. Forms & Authentication
Essential for user onboarding and data collection.
Login, Signup, Logout
Multi-step Forms
Forgot Password, OTP Verification
Autocomplete/Typeahead Inputs
Form Validation Messages
Consent Checkboxes (GDPR/Privacy)
9. Advanced Interactive Elements
For complex UIs and business logic.
Rich Text/WYSIWYG Editors
Code Editors (Monaco, Ace)
Maps (Google Maps, Leaflet)
Chat Widgets
Whiteboard/Canvas Drawing
Drag-and-Drop Zones
Data Grid with CRUD
Infinite Scroll with Lazy Loading
Interactive Graphs/Flowcharts
10. Dashboard & Analytics Components
Used in admin panels and BI tools.
KPI Cards (with Trend Indicators)
Charts with Filters
Data Filters (Dropdowns, Sliders, Toggles)
Real-time Data Widgets
Heatmaps
Custom Widgets (Weather, News, Stats)
11. Miscellaneous
Divider/Separator
Floating Widgets (Chatbot, Help)
Floating Action Bars
Clipboard Buttons (Copy to Clipboard)
QR Code/Barcode Generator
Countdown Timers
Sticky Elements