| Input Controls | Text Field / Input | The most basic input. A box where users can type text. Used for names, emails, search queries, etc. | ```Name: [ John Doe___________ ]<br><br>Comment:<br>+-----------------------+<br> |
| Input Controls | Button | A clickable element that triggers an action. Differentiated by style (primary, secondary, text, icon) to guide users. | [ Primary Action ] ( Secondary ) Text Link [ ⚙️ ] |
| Input Controls | Checkbox | Allows users to select zero, one, or multiple independent options from a list. Does not affect other checkboxes. | Interests:<br>[✓] Design<br>[ ] Development<br>[✓] Marketing |
| Input Controls | Radio Button | Allows users to select only one option from a mutually exclusive set. Selecting one deselects any other. | Account Type:<br>( ) Personal<br>(•) Business |
| Input Controls | Slider | Allows users to select a value from a continuous or discrete range by dragging a handle. Used for settings like volume or price range. | Price Range: $10 [ ---•------ ] $100 |
| Input Controls | Date / Time Picker | A specialized input that opens a calendar or clock interface for users to select a specific date or time, preventing formatting errors. | Event Date: [ March 15, 2024 🗓️ ] |
| Input Controls | File Uploader | A component that allows users to select one or more files from their local device to upload to the server. | ```[ Choose File... ] profile_picture.jpg |
| Navigation | Breadcrumbs | A navigation trail that shows the user's current location within the site's hierarchy, allowing them to trace their path back. | Home > Products > Laptops > Model XYZ |
| Navigation | Pagination | A set of controls used to break down a large list of items (like search results or table rows) into separate pages. | < Prev [1] 2 3 ... 10 Next > |
| Navigation | Stepper | An input control for increasing or decreasing a value in small, discrete steps. Common for item quantities in a shopping cart. | Quantity: [ - ] 2 [ + ] |
| Information Display | Badge / Pill / Tag | A small, inline label used to highlight an item's status, count, or category. Visually distinct and scannable. | Project Status: [ In Progress ]<br>Notifications [ 3 ] |
| Information Display | Progress Bar | A visual indicator that shows the completion status of a task, such as a download, upload, or multi-step form. | Uploading... [=============== > ] 75% |
| Information Display | Spinner / Loader | An animated graphic that indicates a process is ongoing and the user should wait. Used when the wait time is indeterminate. | Loading data... ( ↻ ) |
| Information Display | Avatar | A circular or square image representing a user or entity. Often uses initials as a fallback if no image is available. | Users:<br>(JD) (AS) (👤) |
| Information Display | Alert / Banner | A prominent, often colorful message box that provides contextual feedback or important information (e.g., success, warning, error). | ```+-----------------------------------------+<br> |
| Grouping & Layout | Divider / Separator | A thin horizontal or vertical line used to group or separate content, creating visual distinction and improving readability. | Section One Content...<br>-------------------------------------------<br>Section Two Content... |
| Grouping & Layout | Carousel / Image Slider | A rotating slideshow of content (images, cards, testimonials). Saves vertical space but can hide content from users. | < [ Image 2 of 5 ] ><br> o ● o o o |
| Text & Content | Blockquote | A stylized block of text used to display a quotation or excerpt from another source. It is visually offset from the main content. | > "The key to great design is capturing the<br>> spirit of the client and the essence of<br>> the space."<br> - John Doe, Designer |
| Text & Content | Code Block | A formatted block of text used to display code snippets. It uses a monospace font and often has syntax highlighting. | <pre><code><br>function greet() {<br> console.log("Hello!");<br>}<br></code></pre> |
