Comprehensive UI Elements Guide

2. Input Controls

Button

Text Field / Input Box

Password Field

Checkbox


Radio Button


Toggle Switch

Dropdown List (Select Box)

Slider

Date Picker

Time Picker

File Uploader

Autocomplete / Typeahead

Rich Text Editor

3. Containers & Layout Elements

Card

Card Title

This is an example of a card container. It groups related information.

Modal / Dialog

Accordion

Tooltip

Hover over me Tooltip information

Popover

Carousel / Slider

Grid System

Column 1
Column 2
Column 3

Tabs Panel

Content for Tab 1.

4. Informational Elements

Alert

This is an alert message informing you about something important.

Badge

Chip

Tag 1 × Tag 2 ×

Progress Bar

Spinner / Loader

Toast Notification

This is a toast notification!

Snackbar

This is a snackbar notification!

5. Media Elements

Image

Placeholder Image

Icon

Video Player

Audio Player

Avatar

Avatar

Gallery

Gallery Image Gallery Image Gallery Image

6. Data Display Elements

Table

Name Age Occupation
John Doe 30 Engineer
Jane Smith 25 Designer
Sam Johnson 40 Manager

List

  • First item
  • Second item
  • Third item

Tree View

  • Parent
    • Child 1
    • Child 2
  • Another Parent
    • Child A
    • Child B

Charts & Graphs

150
100
200
January February March

Badge

New

Tag / Label

Label 1 Label 2

7. Interactive Elements

Drag and Drop Interface

Drag Me
Drop Here

Resizable Panels

Resizable Panel
Fixed Panel

Editable Fields

Click to edit this text

Context Menu

Right-click on me

8. Forms & Validation

Form







Fieldset & Legend

Personal Information





Error Message


This field is required.

Helper Text


Must be at least 8 characters.

9. Feedback & Confirmation

Confirmation Dialog

Notification Banner

This is an important notification banner.

Success/Error Indicators

✔ Success
✖ Error

10. Miscellaneous Elements

Search Bar

Pagination

Language Selector

Theme Toggle

Back to Top Button

Footer