Botón de alternancia

Se puede utilizar un Botón de alternancia para agrupar opciones relacionadas.

Para resaltar grupos de botones de alternancia relacionados, un grupo debe compartir un contenedor común. El ToggleButtonGroup controla el estado seleccionado de sus botones hijos cuando se le da su propio prop value.

Selección exclusiva

Con la selección exclusiva, al seleccionar una opción se anula la selección de cualquier otra.

En este ejemplo, los botones de alternancia de justificación de texto presentan opciones para texto justificado a la izquierda, al centro, a la derecha y totalmente justificado (desactivado), con sólo un elemento disponible para la selección a la vez.

Nota: La selección exclusiva no obliga a que un botón esté activo. Para ello, consulte forzar conjunto de valores.

Selección múltiple

La selección múltiple permite seleccionar varias opciones agrupadas lógicamente, como negrita, cursiva y subrayado.

Tamaño

Para botones más grandes o más pequeños, utilice la propiedad size.

<ToggleButtonGroup size="small" {...control} aria-label="Tamaños pequeños">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control} aria-label="Tamaños medianos">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control} aria-label="Tamaños grandes">
  {children}
</ToggleButtonGroup>

<ToggleButtonGroup size="small" {...control} aria-label="Tamaños pequeños">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup {...control} aria-label="Tamaños medianos">
  {children}
</ToggleButtonGroup>
<ToggleButtonGroup size="large" {...control} aria-label="Tamaños grandes">
  {children}
</ToggleButtonGroup>

Press Enter to start editing

Color

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

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

Press Enter to start editing

Botones verticales

Los botones se pueden apilar verticalmente con la propiedad orientation establecida en "vertical".

<ToggleButtonGroup
  orientation="vertical"
  value={view}
  exclusive
  onChange={handleChange}
>
  <ToggleButton value="lista" aria-label="lista">
    <ViewListIcon />
  </ToggleButton>
  <ToggleButton value="módulo" aria-label="módulo">
    <ViewModuleIcon />
  </ToggleButton>
  <ToggleButton value="edredón" aria-label="edredón">
    <ViewQuiltIcon />
  </ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup
  orientation="vertical"
  value={view}
  exclusive
  onChange={handleChange}
>
  <ToggleButton value="lista" aria-label="lista">
    <ViewListIcon />
  </ToggleButton>
  <ToggleButton value="módulo" aria-label="módulo">
    <ViewModuleIcon />
  </ToggleButton>
  <ToggleButton value="edredón" aria-label="edredón">
    <ViewQuiltIcon />
  </ToggleButton>
</ToggleButtonGroup>

Press Enter to start editing

Forzar el conjunto de valores

Si quieres imponer que al menos un botón debe estar activo, puedes adaptar tu función handleChange.

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

const handleDevices = (event, newDevices) => {
  if (newDevices.length) {
    setDevices(newDevices);
  }
};

Botón de alternancia independiente

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

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

Press Enter to start editing

Personalización

Este es un ejemplo de personalización del componente. Puedes aprender más sobre esto en la página de documentación de overrides.

Accesibilidad

ARIA

ToggleButtonGroup tiene role="group". Debe proporcionar una etiqueta accesible con aria-label="label", aria-labelledby="id" o <label>.
ToggleButton establece aria-pressed="<bool>" según el estado del botón. Debes etiquetar cada botón con aria-label.

Teclado

Actualmente, los botones de alternancia están en orden DOM. Navegue entre ellos con la tecla tabulador. El comportamiento de los botones sigue la semántica estándar del teclado.

API

Consulte la siguiente documentación para obtener una referencia completa de todos los accesorios y clases disponibles para los componentes mencionados aquí.