Segmented

O mk-segmented agrupa opções relacionadas em um bloco visual único, exibindo-as lado a lado como opções mutuamente exclusivas. Diferente de tabs — que navegam entre seções de conteúdo —, ele filtra ou alterna o estado da interface sem sair da tela. A opção selecionada é destacada por um indicador branco elevado que desliza com animação ao trocar de item, tornando o estado ativo imediatamente perceptível. Segue semântica de radiogroup/radio e suporta navegação completa por teclado.

Quando usar

Use o mk-segmented para alternar entre um conjunto pequeno de opções mutuamente exclusivas dentro da mesma tela.

• O usuário alterna entre 2 a 5 opções de mesmo peso — por exemplo, Dia / Semana / Mês ou Lista / Grade / Mapa.
• A seleção muda a visualização do conteúdo na mesma tela, sem navegar para outra página.
• As opções são mutuamente exclusivas e sempre uma delas deve estar ativa.

• Há mais de 5 opções — use mk-select.
• As opções navegam entre seções de conteúdo distintas — use mk-tabs.
• Nenhuma opção precisa estar obrigatoriamente ativa — use grupo de mk-button com toggle.
• As opções têm pesos diferentes ou precisam de descrição — use mk-radio.

Anatomia

O componente é formado por um trilho externo (mk-segmented) que agrupa os itens internos (mk-segment).

Estados

Padrão

import { MkSegment, MkSegmented } from '@db1/makuco-ui-react';

<MkSegmented value="day" onMkChange={(e) => console.log(e.detail.value)}>
  <MkSegment value="day">Dia</MkSegment>
  <MkSegment value="week">Semana</MkSegment>
  <MkSegment value="month">Mês</MkSegment>
</MkSegmented>

<mk-segmented value="day" (mkChange)="onchange($event)">
  <mk-segment value="day">Dia</mk-segment>
  <mk-segment value="week">Semana</mk-segment>
  <mk-segment value="month">Mês</mk-segment>
</mk-segmented>

Tamanhos

Use md (padrão, 40 px de altura interna) em formulários, dashboards e painéis de filtro — é o tamanho adequado para a maioria das interfaces desktop. Prefira sm (compacto, 32 px) em áreas com pouco espaço vertical: barras de ferramentas, cabeçalhos de tabela, sidebars ou filtros inline.

Dois tamanhos disponíveis: md (padrão, 40 px de altura interna) e sm (compacto, 32 px).

<MkSegmented value="day" size="md">...</MkSegmented>
<MkSegmented value="day" size="sm">...</MkSegmented>

<mk-segmented value="day" size="md">...</mk-segmented>
<mk-segmented value="day" size="sm">...</mk-segmented>

Com ícones

Use a prop leadingIcon em cada mk-segment para exibir um ícone Lucide antes do rótulo.

<MkSegmented value="list">
  <MkSegment value="list" leadingIcon="list">Lista</MkSegment>
  <MkSegment value="grid" leadingIcon="grid-2x2">Grade</MkSegment>
  <MkSegment value="kanban" leadingIcon="columns-3">Kanban</MkSegment>
</MkSegmented>

<mk-segmented value="list">
  <mk-segment value="list" leading-icon="list">Lista</mk-segment>
  <mk-segment value="grid" leading-icon="grid-2x2">Grade</mk-segment>
  <mk-segment value="kanban" leading-icon="columns-3">Kanban</mk-segment>
</mk-segmented>

Largura total

fullwidth faz o controle ocupar toda a largura do contêiner e distribui os segmentos em partes iguais.

<MkSegmented value="day" fullwidth>
  <MkSegment value="day">Dia</MkSegment>
  <MkSegment value="week">Semana</MkSegment>
  <MkSegment value="month">Mês</MkSegment>
</MkSegmented>

<mk-segmented value="day" fullwidth>
  <mk-segment value="day">Dia</mk-segment>
  <mk-segment value="week">Semana</mk-segment>
  <mk-segment value="month">Mês</mk-segment>
</mk-segmented>

Segmento desabilitado

Um mk-segment individual pode ser desabilitado via disabled. O restante do grupo permanece interativo.

<MkSegmented value="day">
  <MkSegment value="day">Dia</MkSegment>
  <MkSegment value="week" disabled>Semana</MkSegment>
  <MkSegment value="month">Mês</MkSegment>
</MkSegmented>

<mk-segmented value="day">
  <mk-segment value="day">Dia</mk-segment>
  <mk-segment value="week" disabled>Semana</mk-segment>
  <mk-segment value="month">Mês</mk-segment>
</mk-segmented>

Controle desabilitado

disabled no mk-segmented desabilita todos os segmentos de uma vez.

<MkSegmented value="day" disabled>
  <MkSegment value="day">Dia</MkSegment>
  <MkSegment value="week">Semana</MkSegment>
  <MkSegment value="month">Mês</MkSegment>
</MkSegmented>

<mk-segmented value="day" [disabled]="isDisabled">
  <mk-segment value="day">Dia</mk-segment>
  <mk-segment value="week">Semana</mk-segment>
  <mk-segment value="month">Mês</mk-segment>
</mk-segmented>

Comportamento

Ao carregar a tela, uma opção sempre está ativa — o componente nunca aparece sem seleção. Se o value do mk-segmented for omitido, o primeiro segmento habilitado é selecionado automaticamente.

Ao passar o cursor sobre um item inativo, ele recebe um fundo cinza claro, sinalizando que é clicável sem ser confundido com o estado selecionado. Ao clicar, o item anterior retorna ao estado padrão e o novo item assume o destaque com fundo branco e elevação, com animação de slide.

Quando o componente está desabilitado, nenhum item responde à interação e o visual atenuado comunica a indisponibilidade.

Composição

O mk-segmented funciona como contêiner exclusivo de instâncias mk-segment. Não insira outros elementos no slot padrão — o comportamento do indicador deslizante depende da estrutura interna de segmentos.

Os ícones definidos via leadingIcon sempre acompanham um rótulo de texto; evite usar segmentos somente com ícone, pois o rótulo é obrigatório para garantir clareza e acessibilidade.

Props — mk-segmented

Props — mk-segment

Eventos

Slots

Acessibilidade

• O contêiner mk-segmented usa role="group" e aplica aria-disabled quando desabilitado.
• Cada mk-segment renderiza um <button role="radio"> com aria-checked sincronizado ao estado de seleção.
• Navegação por teclado segue o padrão roving tabindex: apenas o item selecionado recebe tabIndex=0; os demais ficam em -1.

Estado desabilitado: Use o estado desabilitado apenas quando a indisponibilidade for temporária e contextual — por exemplo, durante carregamento. Se o componente não se aplica ao contexto, prefira ocultá-lo. Componentes permanentemente desabilitados sem explicação geram confusão para o usuário.

Tamanho de toque: O tamanho md atinge aproximadamente 36 px de altura — adequado para desktop. Em interfaces responsivas ou mobile, verifique se a área de toque mínima de 44 px é atingida. Restrinja o sm a contextos exclusivamente desktop.