---
title: "Select"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Select using native HTML elements. Custom sizes, error states, and grouped options for accessible, theme-aware dropdown form controls."
url: https://frutjam.com/zh-hant/components/select
---

# Select Component

選擇組件為使用者提供了一個互斥選項的下拉列表，允許他們從預先定義的集合中選擇一個值。使用本機 HTML 選擇元素建構並使用 Tailwind CSS 樣式進行增強，選擇支援多種尺寸、顏色和狀態。選擇下拉式選單可存取且可透過鍵盤導航，非常適合從大型選項清單、國家/地區選擇和首選項面板中進行選擇。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級               | 類型 | 描述          |
| ---------------- | --- | ----------- |
| select           | 根據 | 樣式原生選擇下拉式選單 |
| select-soft      | 風格 | 柔和的有色背景     |
| select-ghost     | 風格 | 聚焦之前沒有可見邊框  |
| select-dashed    | 風格 | 虛線邊框樣式      |
| select-xs        | 尺寸 | 特小號         |
| select-sm        | 尺寸 | 小的          |
| select-md        | 尺寸 | 中（預設）       |
| select-lg        | 尺寸 | 大的          |
| select-xl        | 尺寸 | 特大號         |
| select-2xl       | 尺寸 | 2×特大號       |
| select-primary   | 顏色 | 主要主題顏色邊框    |
| select-secondary | 顏色 | 次要主題顏色邊框    |
| select-accent    | 顏色 | 強調主題顏色邊框    |
| select-neutral   | 顏色 | 中性主題色邊框     |
| select-info      | 顏色 | 訊息語意顏色邊框    |
| select-success   | 顏色 | 成功語意顏色邊框    |
| select-warning   | 顏色 | 警告語意顏色邊框    |
| select-error     | 顏色 | 錯誤語意顏色邊框    |

## 基本用法

## 選擇尺寸

```html
<select class="select select-xs">
  <option>Extra Small</option>
  <option selected>Select</option>
</select>

<select class="select select-sm">
  <option>Small</option>
  <option selected>Select</option>
</select>

<select class="select select-md">
  <option>Medium</option>
  <option selected>Select</option>
</select>

<select class="select select-lg">
  <option>Large</option>
  <option selected>Select</option>
</select>

<select class="select select-xl">
  <option>Extra Large</option>
  <option selected>Select</option>
</select>

<select class="select select-2xl">
  <option>2X Large</option>
  <option selected>Select</option>
</select>
```

## 選擇顏色

```html
<select class="select">
  <option selected>Default</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-primary">
  <option selected>Primary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-secondary">
  <option selected>Secondary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-accent">
  <option selected>Accent</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-info">
  <option selected>Info</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-success">
  <option selected>Success</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-warning">
  <option selected>Warning</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-error">
  <option selected>Error</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>
```

## 選擇款式

```html
<select class="select">
  <option selected>Default Style</option>
  <option>Option 1</option>
</select>

<select class="select select-soft">
  <option selected>Soft</option>
  <option>Option 1</option>
</select>

<select class="select select-dashed">
  <option selected>Dashed</option>
  <option>Option 1</option>
</select>

<select class="select select-ghost">
  <option selected>Ghost</option>
  <option>Option 1</option>
</select>
```

## 停用選擇

```html
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>
```

## 使用標籤選擇

```html
<label>
  <span>Choose your favorite country</span>
  <select class="select select-outline w-full max-w-xs">
    <option disabled selected>Pick one</option>
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Brazil</option>
  </select>
</label>
```