componentes / segmented-control

SegmentedControl

Una elección única entre pocas opciones, para alternar entre vistas del mismo contenido.

Cómo usar

Coloca `SegmentedItem`s dentro de un `SegmentedControl`. Es un `radiogroup`: siempre hay un item seleccionado, las flechas mueven y seleccionan (omitiendo los deshabilitados) y `aria-label` es obligatorio. Funciona controlado (`value`) o no (`defaultValue`). Para navegar entre secciones usa `Tabs`.

preview

SegmentedControl.tsx

import { SegmentedControl, SegmentedItem } from "vaiperui";
 
<SegmentedControl aria-label="Vista" defaultValue="list">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
  <SegmentedItem value="map">Mapa</SegmentedItem>
</SegmentedControl>

Colores

preview

primary

success

warning

danger

colores.tsx

<SegmentedControl aria-label="…" defaultValue="list" variantColor="primary">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" variantColor="success">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" variantColor="warning">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" variantColor="danger">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>

Tamaños

preview

tamanos.tsx

<SegmentedControl aria-label="…" defaultValue="list" size="sm">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" size="md">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" size="lg">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>

Radio

preview

none

full

radio.tsx

<SegmentedControl aria-label="…" defaultValue="list" radius="none">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" radius="sm">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" radius="md">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" radius="lg">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" radius="full">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>

Color personalizado

preview

Naranja

Violeta

color-personalizado.tsx

<SegmentedControl aria-label="…" defaultValue="list" customColor="#f97316">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>
 
<SegmentedControl aria-label="…" defaultValue="list" customColor="#8b5cf6">
  <SegmentedItem value="list">Lista</SegmentedItem>
  <SegmentedItem value="grid">Cuadrícula</SegmentedItem>
</SegmentedControl>

Estados

preview

deshabilitado

estados.tsx

<SegmentedControl aria-label="…" disabled>…</SegmentedControl>

Props

Prop	Valores	Predeterminado	Descripción
aria-label	string	obligatorio	Nombra lo que selecciona el control
value	string	ninguno	Item seleccionado (controlado)
defaultValue	string	ninguno	Item inicial (no controlado)
onValueChange	(value: string) => void	ninguno	Se llama cuando cambia la selección
disabled	boolean	false	Deshabilita todo el control
variantColor / customColor	ControlColors \| CustomColor	neutro	Color del texto del item seleccionado; neutro si no se define ninguno
size	sm \| md \| lg	md	Tamaño del control y del texto
radius	none \| sm \| md \| lg \| full	md	Redondeo de las esquinas
animation	none \| smooth \| fast \| bounce	smooth	Transición entre estados
SegmentedItem: value, disabled	string, boolean	ninguno	El valor del item; deshabilita solo este item

Accesibilidad

El contenedor tiene `role="radiogroup"` y `aria-disabled` cuando todo el control está `disabled`.
Cada `SegmentedItem` es un botón con `role="radio"` y `aria-checked`.
Roving tabindex: solo el ítem seleccionado entra en el orden de Tab (`tabIndex=0`).
Las flechas mueven el foco y seleccionan a la vez, dan la vuelta y omiten ítems deshabilitados.

Teclado

Tecla	Acción
Tab	Mueve el foco hacia dentro y fuera del grupo (al ítem seleccionado).
Right / Down	Selecciona el siguiente ítem habilitado.
Left / Up	Selecciona el ítem anterior habilitado.
Enter / Space	Selecciona el ítem enfocado (clic nativo del botón).

Ten en cuenta

Pasa `aria-label` o `aria-labelledby` en `SegmentedControl`; el componente no da nombre al grupo.
Indica `value` o `defaultValue`; sin ítem seleccionado todos tienen `tabIndex=-1` y el grupo no es alcanzable con teclado.
Home y End no están implementados.