# 📝 表單元件

完整的表單控制元件集合

## 完整表單範例

### 用戶註冊表單

姓名
電子郵件 我們不會分享您的電子郵件
選擇興趣
詞彙學習 ✕ 口說練習 ✕
選擇多個選項...
▼
📚 詞彙學習
🗣️ 口說練習
💬 對話練習
📖 閱讀理解
接收通知
電子郵件通知
推播通知
簡訊通知（不可用）

## 選擇器 Select

選擇等級
▼

    <div class="select-wrapper">
      <select class="select-field">
        <option>初級 Beginner</option>
        <option selected>中級 Intermediate</option>
        <option>高級 Advanced</option>
        <option>專家 Expert</option>
      </select>
      <span class="select-arrow">▼</span>
    </div>

### 搜尋下拉選單

選擇國家
請選擇國家...
▼
🇹🇼 台灣 Taiwan
🇯🇵 日本 Japan
🇰🇷 韓國 Korea
🇺🇸 美國 USA
🇬🇧 英國 UK
🇫🇷 法國 France
🇩🇪 德國 Germany

## 複選框與單選框

### 複選框 Checkbox

已選中
未選中
不確定狀態
禁用狀態

### 單選框 Radio

選項一
選項二
選項三
禁用選項

## 開關 Toggle Switch

基礎開關（開啟）
小型開關
大型開關
禁用開關

    <label class="toggle-switch">
      <input type="checkbox" checked>
      <span class="toggle-slider"></span>
    </label>

## 滑塊 Slider

音量控制 50%
難度等級 中級
初級 中級 高級 專家
價格範圍 $20 - $60

## 檔案上傳 File Upload

📁
點擊或拖曳檔案到此處
支援 JPG, PNG, PDF (最大 10MB)

## 表單驗證狀態

成功狀態
✓ 輸入格式正確
錯誤狀態
✕ 請輸入有效的內容

## 水平表單布局

用戶名稱
電子郵件
通知設定
接收電子郵件通知
← 返回元件庫