---
title: "Select"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
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/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.

| Class            | Type  | Description                     |
| ---------------- | ----- | ------------------------------- |
| select           | Base  | Styled native select dropdown   |
| select-soft      | Style | Muted tinted background         |
| select-ghost     | Style | No visible border until focused |
| select-dashed    | Style | Dashed border style             |
| select-xs        | Size  | Extra small                     |
| select-sm        | Size  | Small                           |
| select-md        | Size  | Medium (default)                |
| select-lg        | Size  | Large                           |
| select-xl        | Size  | Extra large                     |
| select-2xl       | Size  | 2× extra large                  |
| select-primary   | Color | Primary theme color border      |
| select-secondary | Color | Secondary theme color border    |
| select-accent    | Color | Accent theme color border       |
| select-neutral   | Color | Neutral theme color border      |
| select-info      | Color | Info semantic color border      |
| select-success   | Color | Success semantic color border   |
| select-warning   | Color | Warning semantic color border   |
| select-error     | Color | Error semantic color border     |

## Basic Usage

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