Segmented

Selección exclusiva en un grupo compacto: periodos, vistas o preferencias. Un solo valor activo; API controlada o no controlada.

Preview principal

SEGMENTEDradiogroup · 1 activo

SemanaMesAño

activo: Semana

Vista

ListaCuadrícula

Iconos

Cada opción puede llevar icon + label.

ListaCuadrícula

Solo iconos

Sin label visible; aria-label usa el value.

Deshabilitado

disabled en una opción: no interactiva.

ActivoInactivoArchivo

No controlado

defaultValue + estado interno (sin value).

SistemaClaroOscuro

callback: system

Uso

import { useState } from "react";
import { SegmentedControl } from "devsoftec-ui";

function Ejemplo() {
  const [period, setPeriod] = useState("week");

  return (
    <SegmentedControl
      options={[
        { value: "week", label: "Semana" },
        { value: "month", label: "Mes" },
        { value: "year", label: "Año" },
      ]}
      value={period}
      onValueChange={setPeriod}
    />
  );
}

Props

SegmentedControl

Prop	Tipo	Descripción
options	SegmentedOption[]	Opciones del grupo
value	string	Activa (controlada)
defaultValue	string	Activa inicial (no controlada)
onValueChange	(value: string) => void	Al cambiar

SegmentedOption

Campo	Tipo	Descripción
value	string	Identificador
label	string	Texto visible
icon	IconName	Ícono a la izquierda
disabled	boolean	No seleccionable

Sin label (solo icon), el value se usa como aria-label.

Comportamiento

• role="radiogroup" / role="radio" + aria-checked
• Controlada (value) o no controlada (defaultValue + estado interno)
• Opciones disabled no responden al clic