你想找什麼 UI 元件？
輸入英文名稱、繁體中文俗稱，或直接描述你要完成的功能。先找到正確元件，再把需求說清楚給 AI。
搜尋結果
Combobox｜組合式選擇框讓使用者輸入關鍵字，從大量既有選項中搜尋並選取資料。Select｜選擇欄從預設選項中選擇一項，適合選項較少且明確的情境。Autocomplete｜自動完成輸入框根據輸入內容提供建議，適合可以接受自由輸入或建議值的情境。Listbox｜選項清單直接顯示有限選項，讓使用者看見清單並選取一項資料。Multi-select｜多重選擇欄從既有選項選取多個值，並清楚回饋已選內容。UI Spec｜介面規格將使用者、資料、行為、狀態與驗收條件寫成可交付的規格。Admin Dashboard Recipe｜管理後台 UI 配方把搜尋、篩選、資料表、批次操作與完整狀態組成可驗收的成員管理頁。Component｜元件可重複使用、負責單一互動或呈現責任的介面單位。詞彙已收錄，文章未公開 Pattern｜互動模式多個元件一起解決一項常見使用者任務的做法。詞彙已收錄，文章未公開 Layout｜版面配置決定導覽、內容區塊與不同螢幕尺寸關係的骨架。詞彙已收錄，文章未公開 Page Template｜頁面範本可換資料、保留任務結構的整頁骨架。詞彙已收錄，文章未公開 Design Token｜設計權杖可跨元件重用的色彩、間距、字級或圓角設計決策。詞彙已收錄，文章未公開 Button｜按鈕在目前情境觸發儲存、取消、開啟或刪除等動作。Link｜連結帶使用者前往另一個位置或資源的導覽元素。Icon Button｜圖示按鈕只用圖示呈現的按鈕，仍需有可辨識的操作名稱。Text Field｜文字輸入欄輸入短文字、識別值或格式化資料的單行欄位。Password Field｜密碼輸入欄輸入秘密值並可控制顯示或隱藏的欄位。Search Field｜搜尋欄依關鍵字縮小既有資料結果並提供清除與零結果回饋。Textarea｜多行文字輸入欄輸入備註或較長文字，通常需要字數與錯誤回饋。Label｜欄位標籤讓使用者與輔助科技知道控制項用途的可見名稱；它是每一個表單欄位的必要組成。Helper Text｜輔助文字在欄位附近補充格式、限制或下一步提示；不取代 Label。Character Counter｜字數計數器回饋多行內容目前字數與上限，超過限制時指出修正方式。Clear Button｜清除按鈕清除搜尋關鍵字後回到完整結果；收在 Search Field 的互動流程中。Checkbox｜核取方塊選取多個可獨立成立的值，支援全選與部分選取。Radio｜單選按鈕從一組互斥選項中選取一個值。Switch｜開關呈現立即生效的 on/off 系統狀態。Toggle Button｜切換按鈕在工具列中切換單一功能，並呈現按下狀態。Segmented Control｜分段控制器在少量同層級的檢視或模式之間快速切換。Number Input｜數字輸入欄輸入需要精確驗證與儲存的數值，例如預算、數量或百分比。Spinbutton｜數值微調器以固定步進微調精確數字，保留直接輸入與上下控制。Slider｜滑桿在有限範圍內快速調整單一值，並讓目前數值保持可見。Range Slider｜範圍滑桿在同一條尺度設定最小與最大值，適合篩選與預算區間。Rating｜評分控制用有限等級表達主觀評價，並清楚提供修改與取消。Stepper Control｜數量步進控制以加減按鈕調整離散數量，例如商品件數或人數。Date Input｜日期輸入欄直接輸入或貼上確切日期，並明確驗證格式與可用日期。Date Picker｜日期選擇器從月曆介面挑選單一可用日期，並顯示已選與不可選日期。Calendar｜月曆瀏覽月份與查看日期上的活動；它不一定是輸入欄位。Time Picker｜時間選擇器選擇一天中的特定時間，明確處理時制、步進與時段限制。Date Range Picker｜日期區間選擇器選取開始與結束日期，處理選取順序、不可選日期與區間摘要。File Input｜檔案選擇欄從裝置選取一或多個檔案，並說明允許格式、數量與大小限制。Dropzone｜拖放上傳區讓使用者拖放檔案，也保留可點擊選檔的替代方式。Upload Queue｜上傳佇列逐筆顯示多檔案的等待、上傳、完成、失敗、取消與重試。Upload Progress｜上傳進度顯示單一檔案的傳輸百分比、目前狀態與取消或重試操作。File Preview｜檔案預覽在提交前確認已選檔案的名稱、格式、大小與移除操作。Label｜欄位標籤用可見名稱說明控制項用途，並正確關聯到輸入欄位。Helper Text｜輔助文字在輸入前說明欄位格式、限制或用途；不取代 Label。Required Indicator｜必填標記清楚標明必填規則，讓畫面與程式都知道資料不能缺少。Error Message｜錯誤訊息在欄位附近說明問題和修正方式，不只留下紅色外框。Fieldset｜欄位群組把共同回答一題的 Checkbox、Radio 或相關控制項組成有語意的群組。Legend｜群組標題說明 Fieldset 裡一組選項共同在決定什麼。Validation Summary｜驗證摘要送出失敗後集中列出錯誤，並連到每個待修欄位。Inline Validation｜即時驗證在合理時機於欄位旁回饋輸入是否符合規則。OTP / PIN Input｜一次性密碼輸入欄輸入短且固定長度的驗證碼，支援貼上、修正與驗證失敗處理。Tag Input｜標籤輸入欄新增、移除並管理多個短值，處理去重、上限與輸入規則。Color Picker｜顏色選擇器讓人以色票與可驗證的色碼選擇需要儲存的顏色資料。Rich Text Editor｜富文字編輯器為需要少量格式的內容提供必要工具列與可直接編輯的內容區。Markdown Editor｜Markdown 編輯器以純文字標記撰寫內容，同時查看安全渲染的預覽結果。Header｜頁首放置品牌、共用工具與主要入口的頁面頂部區域。Navbar｜導覽列呈現少量同層級主要目的地的導覽列。Sidebar Navigation｜側邊導覽在桌面工作區分組呈現多個目的地，支援收合與目前頁標示。Navigation Menu｜導覽選單按需展開次級目的地的可鍵盤操作選單。Bottom Navigation｜底部導覽手機上固定顯示高頻主要目的地的導覽列。Current Page Indicator｜目前頁指示用 aria-current 與可見狀態指出一組導覽中的目前位置。Breadcrumb｜麵包屑導覽顯示目前頁在網站或系統階層中的路徑。Pagination｜分頁讓使用者瀏覽大量資料的不同頁面與資料範圍。Stepper｜步驟導覽器呈現固定順序的多步驟任務與目前步驟。Progress Indicator｜進度指示器以份數或百分比回報正在處理工作的完成程度。Table of Contents｜目錄列出同一長頁的章節結構與可跳轉入口。Anchor Navigation｜錨點導覽以 hash 連結直接跳到同一頁的目標章節。Tabs｜分頁籤在同一內容區切換互相平行、一次只顯示一個的面板。Accordion｜手風琴把可獨立閱讀的長內容分段展開與收合。Disclosure｜揭露控制項在原本脈絡中顯示或隱藏一小段次要補充資訊。Menu Button｜選單按鈕以清楚按鈕開啟一組相關指令；不是表單資料的選擇欄。Dropdown Menu｜下拉選單從觸發元件下方展開的操作選單；需先說清楚是指令而非資料選擇。Context Menu｜情境選單依目前物件提供就地指令，並保留右鍵外的可發現入口。Overflow Menu｜溢位選單把資料列的次級操作收進更多操作，危險動作需另有確認。Command Palette｜命令面板可用鍵盤開啟並搜尋工作區指令的全域入口。Tree View｜樹狀檢視在可展開的父子節點中瀏覽階層；展開、選取與焦點需要分開呈現。Nested List｜巢狀清單以靜態的巢狀清單閱讀內容層級，不需要假的展開或選取互動。Treegrid｜樹狀表格在多欄資料表中展開階層列，適合比較狀態、日期與負責人。Expandable Row｜可展開列在平面資料列下方打開同一筆資料的補充明細，不是父子樹。Dialog｜對話框將一個短而完整的任務帶到前景；是否阻斷背景需依任務決定。Modal Dialog｜模態對話框暫時阻斷背景工作，要求完成或取消眼前的小任務。Non-modal Dialog｜非模態對話框讓檢視器或工具窗與背景工作並存，不遮罩也不阻斷背景。Alert Dialog｜警示對話框需要立即注意與使用者回應的短警示，會中斷背景工作。Confirmation Dialog｜確認對話框在危險或不可逆動作前，寫清楚對象、後果與取消路徑。Drawer｜側邊面板從側邊打開細節或少量編輯，保留原本列表與資料表脈絡。Sheet｜面板浮動內容表面；仍要補充方向與是否阻斷背景，才能成為可驗收規格。Bottom Sheet｜底部面板從底部展開的手機短任務面板，適合摘要與下一步，不適合長表單。Tooltip｜工具提示在 hover 或 keyboard focus 時補一兩句非必要說明；不能承載按鈕與關鍵資訊。Popover｜彈出資訊面板由明確入口開啟，可放較完整資訊與一兩個下一步操作的局部浮層。Hover Card｜懸停資訊卡為一個相關對象提供可用滑鼠、鍵盤或觸控開啟的快速預覽。Alert｜即時警示訊息在相關任務附近提示剛發生的問題或結果；動態通知但不搶走焦點。Banner｜通知橫幅在主要內容前持續呈現服務整體或跨頁的通知；不要和 ARIA banner landmark 混為一談。Callout｜重點提示區塊在相關內容旁放教學、提醒或最佳實務；不代表錯誤，也不會自動消失。Toast｜短暫通知回報不需下一步的短成功結果；可以自動收起，但不能承載待辦或錯誤。Snackbar｜操作回饋列在同頁回報可復原操作；有 Undo 時必須留到使用者能處理。Notification｜持續通知保留需要處理、追蹤或日後回看的系統事件，不靠倒數訊息賭使用者看見。Spinner｜旋轉載入指示器短暫、局部且無法預估完成度的等待；只說明正在處理，不假裝知道百分比。Progress Bar｜進度列工作量可計算時，用任務名稱與真實百分比呈現進度。Skeleton｜骨架載入初次載入有固定結構的清單、卡片或資料表時預留版面。Loading Overlay｜載入遮罩只遮罩暫時不能操作的一個工作區域，避免整頁被鎖住。Indeterminate Progress｜不定進度列工作正在進行但完成度未知時，以線性動態與文字說明等待。Empty State｜空狀態資料尚未建立或篩選後得到零結果時，說明原因與一個最重要的下一步。Error State｜錯誤狀態資料或操作失敗時，指出受影響範圍、原因與可重試的下一步。Success State｜成功狀態任務完成或送出後，確認結果、追溯資訊與後續流程。Offline State｜離線狀態暫時無法連上服務時，說明快取資料、暫停操作與恢復連線方式。Permission State｜權限狀態已登入但角色不足時，清楚說明限制與正確的申請流程。Card｜卡片把一筆能獨立理解的內容、摘要與主要操作放在同一個視覺群組。List｜列表以一致順序重複呈現同類項目，讓使用者快速掃讀、定位與前往內容。Description List｜描述列表用名稱與值的配對呈現一筆資料的屬性，例如角色、部門、日期與狀態。Media Object｜媒體物件讓縮圖或 Avatar 與一段主要文字並排，保持可掃讀的重複結構。Metadata｜中繼資料在主要內容旁補充時間、作者、狀態或分類，協助掃讀但不搶走主題。Badge｜徽章用短文字或數字補充未讀數量、狀態或醒目提示，不承擔複雜操作。Tag｜標籤描述內容所屬分類或特徵，通常是唯讀資訊，不應假裝成按鈕。Chip｜資訊膠囊以緊湊外觀呈現一個值；是否可點、可選或可移除必須明確定義。Filter Chip｜篩選膠囊顯示目前可切換或可移除的篩選條件，操作後要直接更新結果。Status Indicator｜狀態指示用文字、圖示與必要的顏色顯示在線、同步或任務狀態。Avatar｜頭像用照片、圖像或姓名縮寫協助辨識人或組織，但不能取代可讀名稱。Table｜表格用列與欄呈現需要跨筆比較的靜態資料；欄標題與資料關係要清楚。Data Table｜資料表在表格上加入排序、篩選、選取、分頁與列操作，適合管理大量資料。Grid｜互動網格提供像試算表的二維鍵盤導覽與儲存格互動，成本高於一般資料表。Bulk Action Toolbar｜批次操作工具列只有選取一或多筆資料後才出現，清楚顯示選取數量與可執行動作。Image｜圖片呈現一張有內容目的的圖片；替代文字取決於圖片在此處負責什麼。Thumbnail｜縮圖以較小預覽協助辨識並前往完整內容，必須保留清楚的選取與焦點。Gallery｜圖庫一次瀏覽一組彼此相關的媒體，保留順序、說明與可到達的每一項。Carousel｜輪播在有限空間逐張切換內容；需要明確前後控制、目前位置與暫停策略。Lightbox｜燈箱預覽在保留圖庫脈絡下放大媒體；開啟、關閉與前後切換要管理焦點。Video Player｜影片播放器播放有時間軸的影音內容，提供鍵盤可用控制、字幕與清楚播放狀態。Aspect Ratio｜長寬比容器在媒體載入前保留穩定比例，避免版面跳動或圖片被任意拉伸。
找不到完全相符的元件。試試「儲存」、「選人員」或從下方元件庫開始。
元件庫
先看畫面與用途，再進入詳細頁補齊狀態、AI Prompt 與驗收條件。
Button｜按鈕
在目前情境觸發儲存、取消、送出或刪除等動作。
Link｜連結
帶使用者前往另一個位置、頁面或資源。
Text Field｜文字輸入欄
輸入名稱、代號等短文字，保留清楚的 Label 與格式回饋。
Textarea｜多行文字輸入欄
輸入備註與較長內容，搭配字數與錯誤回饋。
Password Field｜密碼輸入欄
安全輸入秘密值，並讓使用者主動顯示或隱藏。
Search Field｜搜尋欄
用關鍵字縮小既有資料，清楚回報結果與零結果。
Checkbox｜核取方塊
選取多個獨立成立的值，支援群組與部分選取。
Radio｜單選按鈕
從互斥的少量選項中選取一個值。
Switch｜開關
切換立即生效的單一 on/off 系統狀態。
Toggle Button｜切換按鈕
在工具列中切換單一功能，清楚呈現按下狀態。
Segmented Control｜分段控制器
在少量同層級檢視或模式間快速切換。
Select｜選擇欄
從少量固定的既有選項選擇一筆資料。
Listbox｜選項清單
直接露出有限選項，讓使用者看見並選擇目前值。
Combobox｜組合式選擇框
搜尋大量既有資料後選取一筆，不能自行建立新值。
Autocomplete｜自動完成輸入框
輸入時提供建議；需求允許時可保留自由輸入。
Multi-select｜多重選擇欄
從既有選項中選取多個值，並清楚看見已選內容。
Number Input｜數字輸入欄
輸入預算、數量等需要精確驗證與儲存的數值。
Spinbutton｜數值微調器
以固定步進微調精確數字，保留直接輸入與邊界回饋。
Slider｜滑桿
在有限範圍內快速調整單一值，持續顯示目前數字。
Range Slider｜範圍滑桿
在同一條尺度設定最小與最大值，兩端數字都要可見。
Rating｜評分控制
以有限等級表達主觀感受，清楚提供修改與取消方式。
Stepper Control｜數量步進控制
用加減按鈕調整少量、離散的數量。
Date Input｜日期輸入欄
直接輸入或貼上確切日期，並以清楚格式與錯誤規則完成驗證。
Date Picker｜日期選擇器
從可用日期中挑選單日，清楚標示已選與不可選日期。
Calendar｜月曆
瀏覽月份與查看日期上的事件；它不是所有日期欄位的替代品。
Time Picker｜時間選擇器
選擇一天中的時間，明確處理時制、步進與允許時段。
Date Range Picker｜日期區間選擇器
一次選取開始與結束日期，提供完整區間與順序驗證。
File Input｜檔案選擇欄
從裝置選取檔案，並先交代格式、數量與大小限制。
Dropzone｜拖放上傳區
提供拖放入口，同時保留點擊選檔的替代方式。
Upload Queue｜上傳佇列
逐筆呈現多檔案的等待、上傳、完成、失敗與可處理動作。
Upload Progress｜上傳進度
讓使用者看見單檔傳了多少、現在狀態與下一步操作。
File Preview｜檔案預覽
在提交前確認檔名、格式、大小與是否要移除附件。
Label｜欄位標籤
讓使用者與輔助科技知道欄位用途的可見名稱。
Helper Text｜輔助文字
在輸入前說明格式、限制或用途；它不取代欄位名稱。
Required Indicator｜必填標記
讓人與程式都知道資料不可缺少，不能只靠紅色星號。
Error Message｜錯誤訊息
在欄位附近說明哪裡錯、怎麼修，而不是只畫紅框。
Fieldset｜欄位群組
把共同回答一題的控制項組在一起，讓關係不只存在版面上。
Legend｜群組標題
替 Fieldset 說清楚共同問題與群組規則。
Validation Summary｜驗證摘要
送出失敗後集中列出錯誤，帶使用者回到待修欄位。
Inline Validation｜即時驗證
在合理時機回饋欄位輸入，避免一開始就用錯誤打斷人。
OTP / PIN Input｜一次性密碼輸入欄
輸入短而固定長度的驗證碼，支援貼上、修正與錯誤處理。
Tag Input｜標籤輸入欄
新增、移除並管理多個短值，處理去重與上限規則。
Color Picker｜顏色選擇器
讓色票與可驗證、可交接的色碼一起成為輸入資料。
Rich Text Editor｜富文字編輯器
讓非技術使用者加入必要格式，但不把公告欄變成文書處理器。
Markdown Editor｜Markdown 編輯器
在純文字來源與安全預覽之間撰寫可攜、可版本控制的內容。
Header｜頁首
承接品牌、全站共用工具與主要入口的頂部區域。
Navbar｜導覽列
在少量同層級主要目的地之間切換的導覽列。
Sidebar Navigation｜側邊導覽
在桌面工作區呈現可分組、可收合的多個目的地。
Navigation Menu｜導覽選單
按需揭露次級目的地，清楚處理展開、關閉與鍵盤焦點。
Bottom Navigation｜底部導覽
在手機固定呈現三到五個高頻、同層級的目的地。
Current Page Indicator｜目前頁指示
以 aria-current 與可見線索說明目前正在看的目的地。
Breadcrumb｜麵包屑導覽
呈現目前頁在資訊架構中的上層路徑。
Pagination｜分頁
在大量資料的不同頁面間切換，清楚交代目前資料範圍。
Stepper｜步驟導覽器
在固定順序的多步驟任務中，標示目前、已完成與尚未開始。
Progress Indicator｜進度指示器
回報一件正在處理的工作已完成多少比例或份數。
Table of Contents｜目錄
列出長頁中的真正章節，協助讀者決定要先讀哪一段。
Anchor Navigation｜錨點導覽
從同頁連結前往有穩定 id 的目標區段，保留可分享的 hash。
Tabs｜分頁籤
在同一區域切換同層級面板，讓使用者一次查看一個。
Accordion｜手風琴
把可獨立閱讀的長內容分段展開與收合。
Disclosure｜揭露控制項
在原本脈絡中顯示或隱藏一小段補充資訊。
Menu Button｜選單按鈕
用明確按鈕開啟少量相關指令，項目會立即執行動作。
Dropdown Menu｜下拉選單
從觸發元件下方展開的指令選單，名稱不等於資料選擇欄。
Context Menu｜情境選單
針對目前物件提供就地操作，不能只依賴滑鼠右鍵。
Overflow Menu｜溢位選單
收納資料列的次級操作；刪除前需提示後果與確認。
Command Palette｜命令面板
以鍵盤搜尋並執行跨區域、高頻的工作區指令。
Tree View｜樹狀檢視
逐層瀏覽可展開的父子節點，清楚分開展開、選取與焦點。
Nested List｜巢狀清單
用靜態縮排清單呈現內容層級，不假裝成可操作的樹。
Treegrid｜樹狀表格
在階層列旁比較多欄資料，並承擔較高的鍵盤與手機版成本。
Expandable Row｜可展開列
在平面資料表中打開同一列的補充明細，不建立父子階層。
Dialog｜對話框
把一件短任務帶到前景，先決定是否真的需要阻斷背景。
Modal Dialog｜模態對話框
背景暫停，使用者先完成或取消眼前任務。
Non-modal Dialog｜非模態對話框
讓檢視器或工具窗保留，同時繼續操作背景工作區。
Alert Dialog｜警示對話框
用短而重要的訊息中斷工作，要求使用者知悉或回應。
Confirmation Dialog｜確認對話框
在高風險動作前交代對象與後果，保留明確取消出口。
Drawer｜側邊面板
從側邊查看細節或做少量修改，保留原本清單的脈絡。
Sheet｜面板
描述浮動內容表面；規格必須再交代方向與中斷程度。
Bottom Sheet｜底部面板
手機快速查看與少量下一步的底部浮動面板。
Tooltip｜工具提示
用一兩句補充說明圖示或狀態，不取代關鍵資訊與正式操作。
Popover｜彈出資訊面板
由明確入口展開局部資訊與下一步，不能被誤當成 Tooltip。
Hover Card｜懸停資訊卡
替人物或專案做短預覽，並讓 hover、focus 與觸控都能找到它。
Alert｜即時警示訊息
在目前任務附近指出問題或結果，讓使用者知道該修正什麼。
Banner｜通知橫幅
把跨頁、持續的服務通知放在主要內容前，不等於 ARIA banner landmark。
Callout｜重點提示區塊
在相關內容旁留下可閱讀的教學與提醒，不搶走當前任務。
Toast｜短暫通知
回報不需下一步的成功結果，短暫顯示後可收起。
Snackbar｜操作回饋列
保留剛完成、仍可復原的操作與一個清楚的 Undo 入口。
Notification｜持續通知
讓需要處理、追蹤或日後回看的系統事件留在可回訪清單。
Spinner｜旋轉載入指示器
短暫、局部且未知進度的等待回饋。
Progress Bar｜進度列
有可靠完成比例時，以任務名稱與百分比說明等待。
Skeleton｜骨架載入
在既定結構的內容初次載入時預留版面。
Loading Overlay｜載入遮罩
只在暫時不可操作的局部工作區顯示處理中。
Indeterminate Progress｜不定進度列
正在前進但未知完成度時，不顯示假百分比。
Empty State｜空狀態
沒有資料時，先說明原因並給一個最重要的下一步。
Error State｜錯誤狀態
資料原本應存在卻失敗時，說清楚範圍、原因與可重試行動。
Success State｜成功狀態
任務結束後確認結果、可追溯資訊與後續流程。
Offline State｜離線狀態
暫時無法連上服務時，標示快取、暫停行動與恢復方式。
Permission State｜權限狀態
角色不足時，說明限制並導向正確的存取申請流程。
Card｜卡片
把一筆能獨立理解的內容、摘要與主要操作放在同一個視覺群組。
List｜列表
以一致順序重複呈現同類項目，讓使用者快速掃讀、定位與前往內容。
Description List｜描述列表
用名稱與值的配對呈現一筆資料的屬性，例如角色、部門、日期與狀態。
Media Object｜媒體物件
讓縮圖或 Avatar 與一段主要文字並排，保持可掃讀的重複結構。
Metadata｜中繼資料
在主要內容旁補充時間、作者、狀態或分類，協助掃讀但不搶走主題。
Badge｜徽章
用短文字或數字補充未讀數量、狀態或醒目提示，不承擔複雜操作。
Tag｜標籤
描述內容所屬分類或特徵，通常是唯讀資訊，不應假裝成按鈕。
Chip｜資訊膠囊
以緊湊外觀呈現一個值；是否可點、可選或可移除必須明確定義。
Filter Chip｜篩選膠囊
顯示目前可切換或可移除的篩選條件，操作後要直接更新結果。
Status Indicator｜狀態指示
用文字、圖示與必要的顏色顯示在線、同步或任務狀態。
Avatar｜頭像
用照片、圖像或姓名縮寫協助辨識人或組織，但不能取代可讀名稱。
Table｜表格
用列與欄呈現需要跨筆比較的靜態資料；欄標題與資料關係要清楚。
Data Table｜資料表
在表格上加入排序、篩選、選取、分頁與列操作，適合管理大量資料。
Grid｜互動網格
提供像試算表的二維鍵盤導覽與儲存格互動，成本高於一般資料表。
Bulk Action Toolbar｜批次操作工具列
只有選取一或多筆資料後才出現，清楚顯示選取數量與可執行動作。
Image｜圖片
呈現一張有內容目的的圖片；替代文字取決於圖片在此處負責什麼。
Thumbnail｜縮圖
以較小預覽協助辨識並前往完整內容，必須保留清楚的選取與焦點。
Gallery｜圖庫
一次瀏覽一組彼此相關的媒體，保留順序、說明與可到達的每一項。
Carousel｜輪播
在有限空間逐張切換內容；需要明確前後控制、目前位置與暫停策略。
Lightbox｜燈箱預覽
在保留圖庫脈絡下放大媒體；開啟、關閉與前後切換要管理焦點。
Video Player｜影片播放器
播放有時間軸的影音內容，提供鍵盤可用控制、字幕與清楚播放狀態。
Aspect Ratio｜長寬比容器
在媒體載入前保留穩定比例，避免版面跳動或圖片被任意拉伸。
元件比較
名稱相近或外觀相像時，先看使用者的下一步，再決定要用哪一種元件。
Button · Link · Icon Button · Menu ButtonButton、Link 與操作元件點一下之後是在目前畫面完成工作，還是前往其他位置？先分清楚動作與導覽。Text Field · Textarea · Password Field · Search FieldText Field、Textarea、Password Field、Search Field短文字、長內容、秘密值與搜尋既有資料，各自需要不同的輸入規則與回饋。Checkbox · Radio · SwitchCheckbox、Radio、Switch能否多選、是否互斥、切換後會不會立即生效，決定了控制項而非配色。Select · Listbox · Combobox · Autocomplete · Multi-selectSelect、Listbox、Combobox、Autocomplete、Multi-select先問能不能輸入、資料是否受限與一次可選幾項，避免把所有東西叫 Dropdown。Number Input · Spinbutton · Slider · Range Slider · Rating · Stepper ControlNumber Input、Slider、Rating 與數值控制精確輸入、範圍調整與主觀評分是不同任務；先說清楚數字代表什麼。Date Input · Date Picker · Calendar · Time Picker · Date Range PickerDate Input、Date Picker、Calendar、Time Picker、Date Range Picker輸入日期、選單日、瀏覽月曆、挑時間與選區間各有不同任務；先說清楚資料要怎麼被使用。File Input · Dropzone · Upload Queue · Upload Progress · File PreviewFile Input、Dropzone、Upload Queue、Progress、Preview上傳不是選到檔案就結束；入口、驗證、佇列、進度與提交前確認各有責任。Label · Helper Text · Required Indicator · Error Message · Fieldset · Legend · Validation Summary · Inline ValidationLabel、Helper Text 與表單驗證結構欄位名稱、提示、必填、群組、欄位錯誤與送出後摘要各有自己的範圍；紅框不能取代它們。OTP / PIN Input · Tag Input · Color Picker · Rich Text Editor · Markdown EditorOTP、Tag Input、Color Picker 與 Editor固定短碼、多個可新增值、顏色資料與內容撰寫，各自只在任務真的需要時才值得增加複雜度。Header · Navbar · Sidebar Navigation · Navigation Menu · Bottom Navigation · Current Page IndicatorHeader、Navbar、Sidebar 與手機導覽先看目的地層級與使用頻率，再決定哪些入口固定可見、哪些改由選單或 Drawer 承接。Breadcrumb · Pagination · Stepper · Progress Indicator · Table of Contents · Anchor Navigation位置、資料頁數與流程進度Breadcrumb、Pagination、Stepper、Progress Indicator、目錄與錨點都在幫人定位，但它們回答的問題不同。Tabs · Accordion · Disclosure · Segmented ControlTabs、Accordion、Disclosure、Segmented Control平行內容、長內容收合、補充資訊與局部檢視模式各有不同責任。Select · Menu Button · Dropdown Menu · Context Menu · Overflow Menu · Command PaletteMenu、Select 與 Command Palette選資料、執行就地指令、收納次級操作與搜尋全域命令，各有不同責任。Tree View · Nested List · Treegrid · Expandable RowTree View、Nested List、Treegrid 與 Expandable Row有縮排不代表是樹；先分清楚父子關係、多欄比較與同列明細。Dialog · Modal Dialog · Non-modal Dialog · Alert Dialog · Confirmation DialogDialog、Modal Dialog、Alert Dialog 與 Confirmation Dialog先判斷是否要中斷背景、是否需要回應，以及動作是否具有高風險。Dialog · Drawer · Bottom SheetDialog、Drawer 與 Bottom Sheet同樣浮在畫面上，是否中斷、是否保留資料表脈絡與裝置寬度，會把它們分成不同選擇。Tooltip · Popover · Hover CardTooltip、Popover 與 Hover Card浮出來的內容是短補充、可操作資訊，還是關聯資料預覽？先決定內容責任，再選浮層。Alert · Banner · CalloutAlert、Banner 與 Callout眼前問題、跨頁通知與頁內教學不能共用同一條訊息；先判斷它和目前任務的距離。Toast · Snackbar · NotificationToast、Snackbar 與 Notification先判斷訊息可不可以消失；成功結果、可復原操作與需追蹤事項不能共用倒數通知。Spinner · Progress Bar · Skeleton · Loading OverlaySpinner、Progress Bar、Skeleton 與 Loading Overlay等待不只是在轉圈：看完成度、既定版型與真正被暫停的工作區域。Empty · Error · Success · Offline · PermissionEmpty、Error、Success、Offline 與 Permission State看似都沒有正常資料，但原因不同；先指出原因，再給對的下一步。Card · List · Description List · Media Object · MetadataCard、List、Description List 與內容結構資料是否獨立、要不要跨筆掃讀，以及名稱和值的關係，決定呈現方式。Badge · Tag · Chip · Filter Chip · Status Indicator · AvatarBadge、Tag、Chip 與狀態標記小不代表功能相同；先分清數量、分類、篩選、狀態與人物識別。Table · Data Table · Grid · Treegrid · Bulk Action ToolbarTable、Data Table、Grid 與批次操作讀表、管理資料與二維編輯需要不同的互動成本。Image · Thumbnail · Gallery · Carousel · Lightbox · Video Player · Aspect RatioImage、Gallery、Carousel 與影音先從內容目的、集合關係與控制需求選媒體元件。