Flux UI
Toggle sidebar

表單 Forms

完整的表單元件集合，包含輸入框、選擇器、開關等互動元素，涵蓋所有常見使用情境。

Input 輸入框

文字輸入框，支援多種類型、尺寸和狀態。

基本用法

基本的文字輸入框、Email 輸入框和密碼輸入框。

<flux:input wire:model="name" placeholder="請輸入姓名" />
<flux:input type="email" wire:model="email" placeholder="電子郵件" icon="envelope" />
<flux:input type="password" wire:model="password" placeholder="密碼" viewable />
尺寸變化

提供不同尺寸的輸入框以適應不同的版面需求。

<flux:input placeholder="預設尺寸" />
<flux:input placeholder="小尺寸" size="sm" />
<flux:input placeholder="極小尺寸" size="xs" />
樣式變化

提供輪廓和填充兩種視覺樣式。

<flux:input placeholder="輪廓樣式（預設）" variant="outline" />
<flux:input placeholder="填充樣式" variant="filled" />
輸入狀態

停用、唯讀和錯誤狀態的輸入框。

<flux:input placeholder="停用狀態" disabled />
<flux:input value="唯讀內容" readonly variant="filled" />
<flux:input placeholder="錯誤狀態" invalid />
圖示與裝飾

在輸入框前後加入圖示或鍵盤快捷鍵提示。

⌘K 
<flux:input icon="magnifying-glass" placeholder="搜尋訂單..." />
<flux:input icon:trailing="credit-card" placeholder="4444-4444-4444-4444" />
<flux:input placeholder="搜尋..." icon="magnifying-glass" kbd="⌘K" />
進階功能

可清除、可複製和可見性切換功能。

<flux:input placeholder="可清除的輸入框" clearable />
<flux:input value="FLUX-1234-5678-ABCD-EFGH" icon="key" readonly copyable />
<flux:input type="password" value="password" viewable />
標籤與說明

使用簡寫 props 快速添加標籤和說明文字。

使用者名稱
電子郵件 此資訊將公開顯示 
<flux:input wire:model="username" label="使用者名稱" placeholder="請輸入使用者名稱" />
<flux:input wire:model="email" label="電子郵件" description="此資訊將公開顯示" type="email" />
輸入框群組

將輸入框與前綴、後綴或按鈕組合使用。

https://
網站
https:// 
<flux:input.group>
    <flux:input.group.prefix>https://</flux:input.group.prefix>
    <flux:input placeholder="example.com" />
</flux:input.group>

<flux:input.group>
    <flux:input placeholder="搜尋..." />
    <flux:button variant="primary">搜尋</flux:button>
</flux:input.group>
輸入遮罩

使用 Alpine.js mask 插件格式化輸入內容。

日期
電話 
<flux:input label="日期" placeholder="DD/MM/YYYY" mask="99/99/9999" />
<flux:input label="電話" placeholder="(999) 999-9999" mask="(999) 999-9999" />

Textarea 多行輸入

多行文字輸入框，支援自動調整高度和調整大小控制。

載入中...

基本用法

基本的多行文字輸入框。

備註 
<flux:textarea wire:model="bio" placeholder="自我介紹..." rows="3" />
<flux:textarea label="備註" placeholder="請輸入備註..." />
列數設定

自訂文字輸入框的高度。

簡短備註 詳細說明 
<flux:textarea rows="2" label="簡短備註" />
<flux:textarea rows="6" label="詳細說明" />
調整大小控制

控制使用者如何調整文字輸入框大小。

<flux:textarea resize="vertical" placeholder="垂直調整（預設）" />
<flux:textarea resize="none" placeholder="禁止調整" />
<flux:textarea resize="horizontal" placeholder="水平調整" />
<flux:textarea resize="both" placeholder="雙向調整" />
自動高度

使用 CSS field-sizing 屬性自動調整高度以適應內容（新版瀏覽器支援）。

<flux:textarea rows="auto" placeholder="輸入內容時自動增高..." />

Select 下拉選單

下拉選擇元件，支援多種變體和功能。

載入中...

基本用法

原生 HTML select 元件。

<flux:select wire:model="country" placeholder="選擇國家">
    <flux:select.option value="tw">台灣</flux:select.option>
    <flux:select.option value="jp">日本</flux:select.option>
    <flux:select.option value="us">美國</flux:select.option>
</flux:select>
可搜尋選單

添加搜尋功能以快速找到選項。

<flux:select searchable placeholder="搜尋國家...">
    <flux:select.option value="tw">台灣</flux:select.option>
    <flux:select.option value="jp">日本</flux:select.option>
</flux:select>
可清除選單

添加清除按鈕以重置選擇。

攝影
設計服務
網站開發 
<flux:select variant="listbox" clearable placeholder="選擇產業...">
    <flux:select.option>攝影</flux:select.option>
    <flux:select.option>設計服務</flux:select.option>
</flux:select>
Listbox 樣式
Pro

更現代化的下拉選單樣式。

攝影
設計服務
網站開發
會計
Combobox 樣式
Pro

結合輸入框和下拉選單的多功能元件。

No results found
攝影
設計服務
網站開發
多選選單
Pro

允許使用者選擇多個選項。

攝影
設計服務
網站開發
會計
法律服務

Checkbox 核取方塊

核取方塊元件，支援單選、群組和卡片樣式。

載入中...

基本用法

基本的核取方塊，帶有標籤和說明文字。

 接收通知
深色模式 切換介面主題 
<flux:checkbox wire:model="notifications" label="接收通知" />
<flux:checkbox wire:model="darkMode" label="深色模式" description="切換介面主題" />
行內樣式

使用 field 元件的 inline 變體將核取方塊與標籤並排顯示。

 我同意服務條款和隱私政策 
<flux:field variant="inline">
    <flux:checkbox wire:model="notifications" />
    <flux:label>我同意服務條款和隱私政策</flux:label>
</flux:field>
核取方塊群組

組織相關的核取方塊成為垂直列表。

權限設定
讀取 查看內容
寫入 建立和編輯內容
刪除 移除內容 
<flux:checkbox.group wire:model="permissions" label="權限設定">
    <flux:checkbox value="read" label="讀取" description="查看內容" />
    <flux:checkbox value="write" label="寫入" description="建立和編輯內容" />
    <flux:checkbox value="delete" label="刪除" description="移除內容" />
</flux:checkbox.group>
全選功能

使用單一核取方塊控制一組核取方塊。

 全選
選項 1
選項 2
選項 3 
<flux:checkbox.group>
    <flux:checkbox.all label="全選" />
    <flux:checkbox checked label="選項 1" />
    <flux:checkbox label="選項 2" />
</flux:checkbox.group>
卡片樣式
Pro

帶邊框的卡片樣式核取方塊。

訂閱偏好
電子報
接收最新消息和優惠
產品更新
了解新功能和產品
活動邀請
獨家活動邀請函

Radio 單選按鈕

單選按鈕群組，支援多種視覺樣式。

載入中...

基本用法

標準的單選按鈕群組。

角色
一般用戶 基本存取權限
管理員 完整管理權限
版主 內容管理權限 
<flux:radio.group wire:model="role" label="角色">
    <flux:radio value="user" label="一般用戶" description="基本存取權限" />
    <flux:radio value="admin" label="管理員" description="完整管理權限" />
    <flux:radio value="moderator" label="版主" description="內容管理權限" />
</flux:radio.group>
Segmented 樣式

分段控制樣式，適合並排顯示選項。

用戶 管理員 版主 
<flux:radio.group variant="segmented" wire:model="role">
    <flux:radio value="user" label="用戶" />
    <flux:radio value="admin" label="管理員" />
    <flux:radio value="moderator" label="版主" />
</flux:radio.group>
Cards 卡片樣式
Pro

帶邊框的卡片樣式單選按鈕，適合顯示方案選擇。

選擇方案
入門方案
適合個人使用者，每月 $9
專業方案
適合小型團隊，每月 $29
企業方案
適合大型企業，每月 $99 
<flux:radio.group wire:model="role" label="選擇方案" variant="cards" class="max-sm:flex-col">
    <flux:radio value="user" label="入門方案" description="適合個人使用者，每月 $9" checked />
    <flux:radio value="admin" label="專業方案" description="適合小型團隊，每月 $29" />
    <flux:radio value="moderator" label="企業方案" description="適合大型企業，每月 $99" />
</flux:radio.group>

Switch 開關

開關切換元件，適合布林值設定。

載入中...

基本用法

基本的開關元件。

接收通知 深色模式 切換介面主題 
<flux:switch wire:model="notifications" label="接收通知" />
<flux:switch wire:model="darkMode" label="深色模式" description="切換介面主題" />
開關群組

組織多個相關的開關設定。

推播通知 接收重要更新的推播通知 電子郵件通知 接收每週摘要郵件 簡訊通知 接收緊急通知簡訊 
<flux:switch label="推播通知" description="接收重要更新的推播通知" checked />
<flux:switch label="電子郵件通知" description="接收每週摘要郵件" />
<flux:switch label="簡訊通知" description="接收緊急通知簡訊" />

Field 表單欄位

表單欄位容器，整合標籤、描述和錯誤訊息。

載入中...

基本用法

完整的表單欄位結構，包含標籤、說明和錯誤訊息。

電子郵件 請輸入有效的電子郵件地址 
<flux:field>
    <flux:label>電子郵件</flux:label>
    <flux:description>請輸入有效的電子郵件地址</flux:description>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>
標籤徽章

在標籤旁顯示徽章，標示必填或選填。

姓名
暱稱 
<flux:input label="姓名" badge="必填" />
<flux:input label="暱稱" badge="選填" />
Fieldset 群組

使用 fieldset 組織相關的表單欄位。

帳號資訊 使用者名稱
電子郵件 
<flux:fieldset>
    <flux:legend>帳號資訊</flux:legend>
    <flux:field>
        <flux:label>使用者名稱</flux:label>
        <flux:input wire:model="name" />
    </flux:field>
</flux:fieldset>

OTP 驗證碼

一次性密碼輸入元件，支援不同長度和模式。

載入中...

基本用法

標準的 6 位數驗證碼輸入。

 
<flux:otp wire:model="otp" length="6" />
隱藏模式

使用 mask 屬性隱藏輸入內容。

 
<flux:otp length="4" private />
輸入模式

支援純數字、字母數字和純字母模式。

純數字（預設）
字母數字
純字母 
<flux:otp length="6" mode="numeric" />
<flux:otp length="6" mode="alphanumeric" />
<flux:otp length="4" mode="alpha" />

Pillbox 標籤選擇器

多選標籤輸入框，支援搜尋功能。

載入中...

基本用法

基本的多選標籤輸入。
設計
開發
行銷 
<flux:pillbox wire:model="tags" placeholder="選擇標籤...">
    <flux:pillbox.option value="design">設計</flux:pillbox.option>
    <flux:pillbox.option value="development">開發</flux:pillbox.option>
    <flux:pillbox.option value="marketing">行銷</flux:pillbox.option>
</flux:pillbox>
可搜尋標籤

添加搜尋功能以快速找到標籤。
No results found
PHP
JavaScript
Python
Ruby
Go 
<flux:pillbox searchable placeholder="搜尋技能...">
    <flux:pillbox.option value="php">PHP</flux:pillbox.option>
    <flux:pillbox.option value="js">JavaScript</flux:pillbox.option>
</flux:pillbox>

Slider 滑桿

滑桿元件，用於數值範圍選擇，支援單一值和範圍選擇。

載入中...

基本用法

基本的單一值滑桿。

音量: 50 
<flux:label class="mb-2">音量: {{ $volume }}</flux:label>
<flux:slider wire:model.live="volume" />
範圍滑桿

選擇數值範圍的雙向滑桿。

價格範圍 
<flux:slider range min="0" max="1000" />
步進控制

設定滑桿的最小、最大值和步進值。

數量（步進 5）
評分（0.5 步進） 
<flux:slider min="0" max="100" step="5" />
<flux:slider min="0" max="5" step="0.5" />

Date Picker 日期選擇器

日期選擇器元件，支援單一日期和日期範圍選擇。

載入中...

基本用法

單一日期選擇器。

 
<flux:date-picker wire:model="selectedDate" placeholder="選擇日期" />
日期範圍

選擇開始和結束日期範圍。

 
<flux:date-picker wire:model="selectedDate" mode="range" placeholder="選擇日期範圍" />
可清除日期

添加清除按鈕以重置選擇。

 
<flux:date-picker clearable placeholder="選擇日期" />

Time Picker 時間選擇器

時間選擇器元件，支援自訂時間間隔。

載入中...

基本用法

標準的時間選擇器。

<flux:time-picker wire:model="selectedTime" placeholder="選擇時間" />
時間間隔

設定時間選擇的間隔。

<flux:time-picker step="15" placeholder="15 分鐘間隔" />
<flux:time-picker step="30" placeholder="30 分鐘間隔" />
<flux:time-picker step="60" placeholder="1 小時間隔" />

Calendar 日曆

日曆元件，用於顯示完整月曆視圖。

載入中...

基本用法

標準的月曆視圖。

 
<flux:calendar />

Autocomplete 自動完成

自動完成元件，提供搜尋建議功能。

載入中...

基本用法

基本的自動完成輸入框。

台北 台中 高雄 台南 新竹 
<flux:autocomplete wire:model="searchQuery" placeholder="搜尋城市...">
    <flux:autocomplete.item value="taipei">台北</flux:autocomplete.item>
    <flux:autocomplete.item value="taichung">台中</flux:autocomplete.item>
    <flux:autocomplete.item value="kaohsiung">高雄</flux:autocomplete.item>
</flux:autocomplete>

Editor 編輯器

富文字編輯器元件，支援格式化文字內容。

基本用法

基本的富文字編輯器，建議使用延遲載入以提升效能。

Styles
Text
Heading 1
Heading 2
Heading 3
Bold ⌘B
Italic ⌘I
Strikethrough ⌘+Shift+S
Bullet list
Ordered list
Blockquote ⌘+Shift+B
Insert link ⌘K
Insert link
Unlink
Align
Left
Center
Right

載入編輯器中...

<div x-data="{ loaded: false }" x-intersect="loaded = true">
    <div x-show="loaded" x-transition>
        <flux:editor wire:model="editorContent" placeholder="開始輸入內容..." />
    </div>
    <div x-show="!loaded" class="flex items-center justify-center h-48">
        <flux:text>載入編輯器中...</flux:text>
    </div>
</div>

File Upload 檔案上傳

檔案上傳元件，支援拖放功能。

載入中...

基本用法

基本的檔案上傳區域。

拖曳檔案至此或點擊上傳

支援 PNG, JPG, PDF 格式，最大 10MB

 
<flux:file-upload>
    <flux:text>拖曳檔案至此或點擊上傳</flux:text>
    <flux:text size="sm" class="text-zinc-500">支援 PNG, JPG, PDF 格式，最大 10MB</flux:text>
</flux:file-upload>
帶標籤的上傳

在表單欄位中使用檔案上傳元件。

上傳大頭照 請上傳清晰的個人照片

點擊或拖曳照片至此

 
<flux:field>
    <flux:label>上傳大頭照</flux:label>
    <flux:description>請上傳清晰的個人照片</flux:description>
    <flux:file-upload>
        <flux:text size="sm">點擊或拖曳照片至此</flux:text>
    </flux:file-upload>
</flux:field>

API Reference

表單元件的屬性與使用方式參考。

載入中...

flux:input
Prop
值
說明
type text | email | password | number 輸入框類型
size sm | xs 輸入框尺寸
variant outline | filled 視覺樣式變體
placeholder string 佔位文字
icon string 前置圖示名稱
icon:trailing string 後置圖示名稱
viewable boolean 密碼可見性切換（僅 password 類型）
clearable boolean 顯示清除按鈕
copyable boolean 顯示複製按鈕
kbd string 鍵盤快捷鍵提示
disabled boolean 停用輸入框
readonly boolean 設為唯讀
invalid boolean 套用錯誤樣式
label string 標籤文字（簡寫方式）
description string 說明文字（簡寫方式）
mask string 輸入遮罩模式（如：99/99/9999）
flux:textarea
Prop
值
說明
rows number | auto 可見文字行數，auto 表示自動高度
resize vertical | horizontal | both | none 控制如何調整大小
placeholder string 佔位文字
label string 標籤文字
description string 說明文字
invalid boolean 套用錯誤樣式
flux:select
Prop
值
說明
placeholder string 未選擇時顯示的文字
variant default | listbox | combobox 選擇器樣式
searchable boolean 啟用搜尋功能
multiple boolean 允許多選（Pro）
clearable boolean 顯示清除按鈕
flux:checkbox
Prop
值
說明
label string 核取方塊標籤
description string 說明文字
value string 核取方塊值
checked boolean 預設選中狀態
disabled boolean 停用核取方塊
flux:radio.group
Prop
值
說明
variant default | segmented | cards | pills | buttons 單選群組樣式
label string 群組標籤
description string 說明文字
flux:otp
Prop
值
說明
length number 驗證碼長度
mode numeric | alphanumeric | alpha 輸入模式
private boolean 隱藏輸入內容
表單驗證最佳實踐

使用 flux:field 包裝輸入元件

  • 包含 label、description 和 error 訊息
  • 使用 variant="inline" 適合開關和核取方塊
  • 錯誤訊息自動與 Livewire 驗證整合

即時驗證

  • 使用 wire:model.live 進行即時驗證
  • 使用 wire:model.blur 在失焦時驗證
  • 搭配 #[Validate] 屬性定義驗證規則

無障礙設計

  • 為所有輸入元件提供 label
  • 使用 description 提供額外說明
  • 確保錯誤訊息明確且有幫助
  • 使用適當的 input type 以改善行動裝置體驗

效能優化

  • 大型富文字編輯器使用延遲載入（x-intersect）
  • 避免在大量表單欄位上使用 wire:model.live
  • 使用 wire:model.blur 減少伺服器請求