Tucano
Grupo de botões
Dois papéis na mesma caixa. Emendado, ele junta ações que andam juntas num bloco só, em vez de
três botões soltos na linha. Com is-segmented, ele veste o <input> de
botão — a escolha de uma opção entre poucas, com a cara das abas segmentadas. É só
classe: nenhum JavaScript, e o valor continua sendo do <input> nativo.
Exemplos
O mesmo .tuc-btn-group por fora; por dentro, ou botões, ou rótulos com um
<input> dentro.
Uma opção entre poucas
É type="radio": o navegador desmarca a anterior, e as setas andam pelo grupo.
Várias ao mesmo tempo
Trocando para type="checkbox", cada botão liga e desliga por conta própria.
Ações emendadas
Sem is-segmented, os botões dividem a borda e arredondam só nas pontas. Vale qualquer variante.
Pequeno, ao lado de um campo
is-sm nos botões acerta a altura de um is-sm; o canto acompanha.
Linha inteira
is-block ocupa a largura toda e reparte em partes iguais — o caminho no celular.
Com rótulo e ajuda
Dentro do formulário ele é um campo como os outros: .tuc-label em cima, .tuc-hint embaixo.
Muda o cálculo dos impostos na nota.
Como usar
Na escolha, o <input> fica dentro do <label class="tuc-btn">,
e como filho direto: é ele que o CSS lê para saber quem está marcado.
<div class="tuc-btn-group is-segmented" role="group" aria-label="Período">
<label class="tuc-btn">
<input type="radio" class="tuc-btn__input" name="period" value="day" checked> Dia
</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="Ações do contrato">
<button type="button" class="tuc-btn is-outline">Editar</button>
<button type="button" class="tuc-btn is-outline">Duplicar</button>
</div>O role="group" com aria-label (ou aria-labelledby apontando para o rótulo)
é o que faz o leitor de tela anunciar do que se trata a fileira. Num formulário, o
<fieldset> com <legend> também serve — só não ponha a legenda dentro do
grupo, que é uma linha de botões.
No formulário do Django
Nada de widget novo: é o RadioSelect de sempre, com a classe no attrs e
percorrido no template.
period = forms.ChoiceField(
choices=[('day', 'Dia'), ('week', 'Semana'), ('month', 'Mês')],
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 uma aba, mas não é
A aba segmentada troca o que se vê na tela e não vai para o servidor. O grupo de botões é campo: tem name, tem value, entra no POST e aceita required. Se a escolha vai junto com o formulário, é aqui; se ela só mostra outro painel, é lá.
Até umas quatro opções, e curtas
Todas ficam à vista ao mesmo tempo, lado a lado: com muitas, ou com textos longos, a fileira estoura a linha no celular. Passando disso, use o select ou as opções em lista — que também são o certo quando cada opção precisa de uma explicação embaixo.
Teclado e acessibilidade
Tudo nativo. Na escolha, quem recebe o foco é o <input> — invisível, mas presente:
ele fica com opacidade zero, e não escondido, justamente para continuar focável e anunciado. O anel de foco
aparece no botão em volta dele.
| Tecla | Onde | Ação |
|---|---|---|
Tab | Grupo de rádios | Entra na opção marcada e sai do grupo — o grupo inteiro é uma parada só |
← → ↑ ↓ | Rádio com foco | Anda pelas opções e já marca a de chegada |
Tab | Caixas e botões | Cada um é uma parada, porque cada um age por conta própria |
Espaço | Caixa com foco | Liga e desliga |
Enter Espaço | Botão de ação | Aciona |
- O grupo precisa de nome:
role="group"comaria-label, ou um<fieldset>com<legend>. - Botão só de ícone continua precisando de
aria-label, como em qualquer botão. disabledno<input>esmaece o botão sozinho — sem classe a mais no rótulo.
Classes
Só CSS. A caixa é a mesma da aba segmentada, de propósito: as duas precisam alinhar com os campos da
linha, e por isso a borda mais o respiro somam exatamente --tuc-control-height.
| Classe | Para quê |
|---|---|
tuc-btn-group | A fileira. Sozinha, emenda os botões num bloco só |
is-segmented | A caixa rebaixada das abas segmentadas, para a escolha em botão |
is-block | Ocupa a linha toda, repartida em partes iguais |
tuc-btn__input | O <input> dentro do rótulo: invisível, focável e ainda dono do valor |
tuc-btn e suas variantes | Cada item do grupo — is-outline, is-primary, is-sm, is-icon |