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.

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;

Instalá el componente via terminal.

npm install @nimbus-ds/segmented-control

Segmented Control

  • 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.
  • 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.
  • Navegación fluida con teclado: Permitir moverse entre las opciones usando flechas y seleccionar con Enter o Space.
  • 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.

El segmented control puede contener:

  1. Icon (opcional)
  2. Text (opcional)
  3. Badge (opcional, para indicar cantidades)
Imagen del diagrama mostrando los componentes: icon, text y badge con numeración de opciones

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
Imagen de los ejemplos de uso: solo texto, texto con badge, icono con texto y solo icono

Este componente utiliza:

  • Icons
  • Badge

Selection:

  1. Basic. All rest default: Todas las opciones no seleccionadas por defecto.
  2. Controlled. Single select : Una sola opción seleccionada al mismo tiempo.
Imagen de las variantes de selección: basic con todas las opciones no seleccionadas y controlled con selección única

Device:

  1. Desktop. Ancho automático según cantidad de opciones.
  2. Mobile. Ancho fijo al ancho de la resolución de pantalla.
Imagen de la versión desktop con ancho automático basado en la cantidad de opciones
Imagen de la versión mobile con ancho fijo ocupando toda la resolución de pantalla
  • Selected (active)
  • Rest (default)
  • Hover
  • Pressed
  • Disabled
Imagen de los estados interactivos: selected, rest, hover, pressed y disabled

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)

Additional props are passed to the <SegmentedControl> element. See div docs for a list of props accepted by the <SegmentedControl> element.

SegmentedControl

NameTypeDefaultDescription

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

NameTypeDefaultDescription

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

NameTypeDefaultDescription