---
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/vi/components/select
---

# Select Component

Select components provide users with a dropdown list of mutually exclusive options, allowing them to choose one value from a predefined set. Built with native HTML select elements and enhanced with Tailwind CSS styling, selects support multiple sizes, colors, and states. Accessible and keyboard-navigable, select dropdowns are ideal for choosing from large option lists, country selection, and preference panels.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học          | Kiểu       | Sự miêu tả                                            |
| ---------------- | ---------- | ----------------------------------------------------- |
| select           | Căn cứ     | Styled native select dropdown                         |
| select-soft      | Phong cách | Nền màu bị tắt tiếng                                  |
| select-ghost     | Phong cách | Không có đường viền hiển thị cho đến khi được lấy nét |
| select-dashed    | Phong cách | Kiểu đường viền nét đứt                               |
| select-xs        | Kích cỡ    | Cực nhỏ                                               |
| select-sm        | Kích cỡ    | Bé nhỏ                                                |
| select-md        | Kích cỡ    | Trung bình (mặc định)                                 |
| select-lg        | Kích cỡ    | Lớn                                                   |
| select-xl        | Kích cỡ    | Cực lớn                                               |
| select-2xl       | Kích cỡ    | 2× extra large                                        |
| select-primary   | Màu sắc    | Đường viền màu chủ đề chính                           |
| select-secondary | Màu sắc    | Đường viền màu chủ đề phụ                             |
| select-accent    | Màu sắc    | Đường viền màu chủ đề nổi bật                         |
| select-neutral   | Màu sắc    | Đường viền màu chủ đề trung tính                      |
| select-info      | Màu sắc    | Đường viền màu ngữ nghĩa thông tin                    |
| select-success   | Màu sắc    | Đường viền màu ngữ nghĩa thành công                   |
| select-warning   | Màu sắc    | Cảnh báo viền màu ngữ nghĩa                           |
| select-error     | Màu sắc    | Lỗi ngữ nghĩa viền màu                                |

## Cách sử dụng cơ bản

## Select Sizes

```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>
```

## Select Colors

```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>
```

## Select Styles

```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>
```

## Disabled Select

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

## Select with Label

```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>
```