不知道該用哪個元件時，先比行為。
外觀相像不代表互動相同。每個比較主題都先問使用者下一步、資料是否受限，再帶你進入元件詳細頁與可複製的 AI Prompt。
比較主題
每一組都對應一個常見的選型困惑，而不是文章目錄。
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 與影音先從內容目的、集合關係與控制需求選媒體元件。