Segmented Control

El Segmented Control es un componente compuesto de selección exclusivo que permite a los usuarios elegir una o varias opciones de un grupo predefinido. Están diseñados para casos de selección rápida y contextual, como filtros de productos o vistas alternativas.

Inicial

Controlled

Full Width

import React from "react";
import { SegmentedControl } from "@nimbus-ds/components";
import { mockSegmentedControlLabels as labels } from "lib/mocks/mock-labels";

const Example: React.FC = () => (
  <SegmentedControl>
    {labels.map((label, index) => (
      <SegmentedControl.Button
        id={label}
        key={label}
        label={label}
        // Disable latest segment
        disabled={index === labels.length - 1}
      >
        {label}
      </SegmentedControl.Button>
    ))}
  </SegmentedControl>
);

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/segmented-control

Segmented Control

Cuándo usar

Filtrar vistas o productos por un criterio específico (por ejemplo, estado del pedido).
Cambiar entre vistas o modos dentro de una misma pantalla.
Agrupar opciones de selección simples en un espacio reducido.
Sustituir menús desplegables o checkboxes para opciones que necesitan una interacción más rápida.

Cuándo no usar

No usar para criterios complejos o jerárquicos (usá filtros avanzados o modales).
No usar más de 5 opciones por grupo. En esos casos, evalúa usar Chips o un menú desplegable.
Evitar usarlo si las opciones no son mutuamente excluyentes (preferí checkboxes o toggles).
Evitar usarlos junto a otros elementos de selección ya que pueden complejizar las tareas del usuario.

Criterios de usabilidad y productividad

Navegación fluida con teclado: Permitir moverse entre las opciones usando flechas y seleccionar con Enter o Space.

Buenas prácticas de accesibilidad

Soporte completo de navegación por teclado: Las opciones deben ser accesibles con Tab y seleccionables con Enter o Space.
Manejo correcto del foco: El foco debe indicarse visualmente y moverse lógicamente entre opciones.
Uso correcto de roles ARIA: Usar role="radiogroup" y role="radio" según corresponda para describir la relación entre opciones.

Anatomía

El segmented control puede contener:

Icon (opcional)
Text (opcional)
Badge (opcional, para indicar cantidades)

Todos estos elementos pueden usarse de manera variada creando diferentes casuísticas según la necesidad y objetivo. Ejemplos válidos:

Solo texto
Texto + badge
Ícono + texto
Solo icono

Dependencias

Este componente utiliza:

Icons
Badge

Variantes

Selection:

Basic. All rest default: Todas las opciones no seleccionadas por defecto.
Controlled. Single select : Una sola opción seleccionada al mismo tiempo.

Device:

Desktop. Ancho automático según cantidad de opciones.
Mobile. Ancho fijo al ancho de la resolución de pantalla.

Estados

Selected (active)
Rest (default)
Hover
Pressed
Disabled

Do and Don'ts

✅ Do

Usar para filtros simples de hasta 5 ítems
Si el componente está relacionado con acciones de productos, alinealo con filtros visibles o encabezados de sección.
En mobile, ubica el componente en una posición accesible (por ejemplo, sticky en la parte superior).
Si hay una opción que representa el estado "Todos", usá esa opción como preseleccionada.

❌ Don't

No mezclar criterios distintos en un mismo grupo
No usar íconos sin contexto si no son universales
No abusar del uso de badges si no aportan valor
No romper con la altura de 32px (consistencia visual)

Props

Las propiedades adicionales se pasan al elemento <SegmentedControl>. Consultá la documentación para ver la lista de atributos aceptados por el elemento <SegmentedControl>.

SegmentedControl

Name	Type	Default	Description
children	React.ReactNode		The content of the segmented control. Should contain SegmentedControlButton components with unique id props.
fullWidth	boolean	'false'	Determines if segments span all available width.
selectedSegments*	array		The currently selected segment IDs. Allows for single or multiple selection.
onSegmentsSelect*	object		Callback fired when the selected segments change.

SegmentedControl.Button

Name	Type	Default	Description
id*	string		Unique identifier for the segment button. Required for proper state management and accessibility.
label	string		Label of the segment used for accessibility.
fullWidth	boolean	'false'	Determines if segment spans all available width.
children	React.ReactNode		Represents all of the things React can render. Where {@link ReactElement} only represents JSX, `ReactNode` represents everything that can be rendered.

SegmentedControl.ButtonSkeleton

Name	Type	Default	Description