Botões de alternância

Os botões de alternância podem ser usados para agrupar opções relacionadas.

Para enfatizar grupos de botões de alternância relacionados, o grupo deve ter um contêiner em comum. O ToggleButtonGroup controla o estado selecionado de seus botões filhos através de sua propriedade value.

Seleção exclusiva

Com seleção exclusiva, selecionar uma opção desseleciona qualquer outra.

In this example, text justification toggle buttons present options for left, center, right, and fully justified text (disabled), with only one item available for selection at a time.

Seleção múltipla

Múltipla seleção permite que opções logicamente agrupadas, como negrito, itálico e sublinhado, tenham várias opções selecionadas.

Tamanho

For larger or smaller buttons, use the size prop.

<ToggleButtonGroup size="small" {...control}>
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control}>{children}</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control}>
  {children}
</ToggleButtonGroup>

Cor

<ToggleButtonGroup
  color="primary"
  value={alignment}
  exclusive
  onChange={handleChange}
>
  <ToggleButton value="web">Web</ToggleButton>
  <ToggleButton value="android">Android</ToggleButton>
  <ToggleButton value="ios">iOS</ToggleButton>
</ToggleButtonGroup>

Botões verticais

Os botões podem ser empilhados verticalmente com a propriedade orientation definida para "vertical".

<ToggleButtonGroup
  orientation="vertical"
  value={view}
  exclusive
  onChange={handleChange}
>
  <ToggleButton value="list" aria-label="list">
    <ViewListIcon />
  </ToggleButton>
  <ToggleButton value="module" aria-label="module">
    <ViewModuleIcon />
  </ToggleButton>
  <ToggleButton value="quilt" aria-label="quilt">
    <ViewQuiltIcon />
  </ToggleButton>
</ToggleButtonGroup>

Forçar valor definido

Se você deseja forçar que pelo menos um botão esteja ativo, você pode adaptar sua função handleChange.

const handleFormat = (event, newFormats) => {
  if (newFormats.length) {
    setFormats(newFormats);
  }
};

const handleAlignment = (event, newAlignment) => {
  if (newAlignment !== null) {
    setAlignment(newAlignment);
  }
};

Botão de alternância autônomo

<ToggleButton
  value="check"
  selected={selected}
  onChange={() => {
    setSelected(!selected);
  }}
>
  <CheckIcon />
</ToggleButton>

Botão de alternância customizado

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de sobrescritas.

Acessibilidade

ARIA

ToggleButtonGroup possui role="group". Você deve fornecer um rótulo acessível com aria-label="label", aria-labelledby="id" ou <label>.
ToggleButton define aria-pressed="<bool>" de acordo com o estado do botão. Você deve rotular cada botão com aria-label.

Teclado

Até o momento, os botões de alternância estão na ordem DOM. Navegue entre eles com a tecla tab. O comportamento dos botões segue a semântica padrão do teclado.