Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Seleccionar componente

Última actualización:

Menú desplegable de selección de CSS Tailwind solo para CSS con variantes de color primario, secundario, de acento y semántico. Tallas xs-xl, estilo fantasma. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes seleccionados proporcionan a los usuarios una lista desplegable de opciones mutuamente excluyentes, lo que les permite elegir un valor de un conjunto predefinido. Construidas con elementos de selección HTML nativos y mejoradas con el estilo CSS Tailwind, las selecciones admiten múltiples tamaños, colores y estados. Los menús desplegables de selección, accesibles y navegables por teclado, son ideales para elegir entre grandes listas de opciones, selección de países y paneles de preferencias.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
selectBaseMenú desplegable de selección nativo con estilo
select-softEstiloFondo teñido apagado
select-ghostEstiloNo hay borde visible hasta que se enfoca
select-dashedEstiloEstilo de borde discontinuo
select-xsTamañoextrapequeño
select-smTamañoPequeño
select-mdTamañoMedio (predeterminado)
select-lgTamañoGrande
select-xlTamañoExtra grande
select-2xlTamaño2× extra grande
select-primaryColorBorde de color del tema principal
select-secondaryColorBorde de color del tema secundario
select-accentColorBorde de color del tema de acento
select-neutralColorBorde de color de tema neutro
select-infoColorBorde de color semántico de información
select-successColorBorde de color semántico de éxito.
select-warningColorBorde de color semántico de advertencia
select-errorColorBorde de color semántico de error

Uso básico

1
2
3
4
5
6
<select class="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

1
2
3
4
5
6
<select className="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Seleccionar tamaños

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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>

Seleccionar colores

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<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>

Seleccionar estilos

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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>

Seleccionar deshabilitado

html 
1
2
3
4
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>

Seleccionar con etiqueta

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Seleccionar según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP