Tucano
Grupo de botones
Dos papeles en la misma caja. Unido, junta en un solo bloque las acciones que van juntas, en vez de
tres botones sueltos en la línea. Con is-segmented, viste el <input> de botón —
la elección de una opción entre pocas, con la cara de las pestañas segmentadas. Solo
clases: nada de JavaScript, y el valor sigue siendo del <input> nativo.
Ejemplos
El mismo .tuc-btn-group por fuera; por dentro, o botones, o rótulos con un
<input> dentro.
Una opción entre pocas
Es type="radio": el navegador desmarca la anterior, y las flechas recorren el grupo.
Varias a la vez
Cambiando a type="checkbox", cada botón se enciende y se apaga por su cuenta.
Acciones unidas
Sin is-segmented, los botones comparten el borde y solo se redondean en las puntas. Vale cualquier variante.
Pequeño, al lado de un campo
is-sm en los botones acierta la altura de un is-sm; la esquina acompaña.
Línea entera
is-block ocupa todo el ancho y lo reparte en partes iguales — el camino en el móvil.
Con rótulo y ayuda
Dentro del formulario es un campo como los demás: .tuc-label arriba, .tuc-hint abajo.
Cambia el cálculo de los impuestos en la factura.
Cómo se usa
En la elección, el <input> va dentro del
<label class="tuc-btn">, y como hijo directo: es lo que el CSS lee para saber cuál está
marcado.
<div class="tuc-btn-group is-segmented" role="group" aria-label="Periodo">
<label class="tuc-btn">
<input type="radio" class="tuc-btn__input" name="period" value="day" checked> Día
</label>
<label class="tuc-btn">
<input type="radio" class="tuc-btn__input" name="period" value="week"> Semana
</label>
</div>
<div class="tuc-btn-group" role="group" aria-label="Acciones del contrato">
<button type="button" class="tuc-btn is-outline">Editar</button>
<button type="button" class="tuc-btn is-outline">Duplicar</button>
</div>El role="group" con aria-label (o aria-labelledby apuntando al rótulo) es
lo que hace que el lector de pantalla anuncie de qué va la fila. En un formulario, el
<fieldset> con <legend> también sirve — solo que no pongas la leyenda
dentro del grupo, que es una fila de botones.
En el formulario de Django
Nada de widget nuevo: es el RadioSelect de siempre, con la clase en attrs y recorrido
en la plantilla.
period = forms.ChoiceField(
choices=[('day', 'Día'), ('week', 'Semana'), ('month', 'Mes')],
widget=forms.RadioSelect(attrs={'class': 'tuc-btn__input'}),
)<div class="tuc-btn-group is-segmented" role="group" aria-label="{{ form.period.label }}">
{% for radio in form.period %}
<label class="tuc-btn">{{ radio.tag }} {{ radio.choice_label }}</label>
{% endfor %}
</div>Parece una pestaña, pero no lo es
La pestaña segmentada cambia lo que se ve en la pantalla y no llega al servidor. El grupo de botones es un campo: tiene name, tiene value, entra en el POST y acepta required. Si la elección viaja con el formulario, es aquí; si solo muestra otro panel, es allí.
Hasta unas cuatro opciones, y cortas
Todas quedan a la vista al mismo tiempo, una al lado de la otra: con muchas, o con textos largos, la fila revienta la línea en el móvil. De ahí en adelante, usa el select o las opciones en lista — que también son lo correcto cuando cada opción necesita una explicación debajo.
Teclado y accesibilidad
Todo nativo. En la elección, quien recibe el foco es el <input> — invisible, pero
presente: se queda con opacidad cero, y no escondido, justamente para seguir siendo enfocable y anunciado. El
anillo de foco aparece en el botón que lo rodea.
| Tecla | Dónde | Acción |
|---|---|---|
Tab | Grupo de radios | Entra en la opción marcada y sale del grupo — el grupo entero es una sola parada |
← → ↑ ↓ | Radio con foco | Recorre las opciones y marca la de llegada |
Tab | Casillas y botones | Cada uno es una parada, porque cada uno actúa por su cuenta |
Espacio | Casilla con foco | La enciende y la apaga |
Enter Espacio | Botón de acción | Lo acciona |
- El grupo necesita nombre:
role="group"conaria-label, o un<fieldset>con<legend>. - El botón de solo icono sigue necesitando
aria-label, como en cualquier botón. disableden el<input>atenúa el botón solo — sin una clase de más en el rótulo.
Clases
Solo CSS. La caja es la misma de la pestaña segmentada, a propósito: las dos tienen que alinear con
los campos de la fila, y por eso el borde más el respiro suman exactamente --tuc-control-height.
| Clase | Para qué |
|---|---|
tuc-btn-group | La fila. Sola, une los botones en un solo bloque |
is-segmented | La caja rebajada de las pestañas segmentadas, para la elección en botón |
is-block | Ocupa la línea entera, repartida en partes iguales |
tuc-btn__input | El <input> dentro del rótulo: invisible, enfocable y todavía dueño del valor |
tuc-btn y sus variantes | Cada elemento del grupo — is-outline, is-primary, is-sm, is-icon |