Ingredientes
Un toque para incluir, dos para excluir
Chips para incluir o excluir
Cada chip tiene tres estados: un toque lo incluye, otro lo excluye y el tercero lo deja neutro.
Ajustes
Código
<div class="uv-fie"><p class="ti">Ingredientes</p><div class="cs"><button type="button" data-s="off"><i aria-hidden="true"></i><span>Gluten</span></button><button type="button" data-s="in"><i aria-hidden="true"></i><span>Lácteos</span></button><button type="button" data-s="out"><i aria-hidden="true"></i><span>Picante</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Frutos secos</span></button><button type="button" data-s="off"><i aria-hidden="true"></i><span>Marisco</span></button></div><p class="hn">Un toque para incluir, dos para excluir</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Las webs de recetas, las cartas y los portales de empleo a menudo necesitan algo más que sí o no: platos con pollo pero sin frutos secos, o empleos de diseño pero no en agencias. Estos chips pasan por neutro, incluir y excluir. Los incluidos se ponen verdes con un más; los excluidos, rojos con una equis y el texto tachado.
Cada chip es un botón con aria-pressed y un aria-label que nombra el estado, así que los lectores de pantalla oyen incluido o excluido. Una pista bajo los chips explica el gesto.