swap_horizSelección de tipo de búsqueda
Formularios que permiten al usuario cambiar entre diferentes tipos de búsqueda (texto, imágenes) según sus necesidades.
buildMétodos de implementación
radio_button_checked
Botones de radio
Opción mutuamente excluyente que permite seleccionar un único tipo de búsqueda
tabs
Pestañas
Interfaz visual con secciones separadas para cada tipo de búsqueda
arrow_drop_down_circle
Menú desplegable
Selector compacto que revela opciones al hacer clic
toggle_on
Interruptor
Control deslizante para alternar entre dos tipos de búsqueda
codeEjemplo con botones de radio
<form action="/buscar" method="get">
<div class="search-options">
<div class="search-option">
<input type="radio" id="text-search" name="search-type" value="text" checked>
<label for="text-search">Texto</label>
</div>
<div class="search-option">
<input type="radio" id="image-search" name="search-type" value="image">
<label for="image-search">Imágenes</label>
</div>
</div>
<div class="search-container">
<input type="text" name="q" placeholder="Introduce tu búsqueda...">
<button type="submit">Buscar</button>
</div>
<!-- Filtros específicos para imágenes (mostrar con JavaScript) -->
<div id="image-filters" class="hidden">
<select name="tbs">
<option value="">Cualquier tamaño</option>
<option value="isz:l">Grandes</option>
</select>
</div>
</form>
<div class="search-options">
<div class="search-option">
<input type="radio" id="text-search" name="search-type" value="text" checked>
<label for="text-search">Texto</label>
</div>
<div class="search-option">
<input type="radio" id="image-search" name="search-type" value="image">
<label for="image-search">Imágenes</label>
</div>
</div>
<div class="search-container">
<input type="text" name="q" placeholder="Introduce tu búsqueda...">
<button type="submit">Buscar</button>
</div>
<!-- Filtros específicos para imágenes (mostrar con JavaScript) -->
<div id="image-filters" class="hidden">
<select name="tbs">
<option value="">Cualquier tamaño</option>
<option value="isz:l">Grandes</option>
</select>
</div>
</form>