Controle segmentado

Um interruptor de seleção única em uma faixa terciária com um polegar branco deslizante - o interruptor Semanal / Mensal / Anual das cartas de gráfico. Construído em React Aria ToggleButtonGroup: setas movem, o espaço seleciona.

Instalação

Você pode adicionar este controle segmentado usando nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

CLI

Manual

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add segmented-control

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Seleção controlada

A seleção usa a API de conjunto de chaves da Aria: pass selectedKeys + onSelectionChange para a controlar, ou defaultSelectedKeys para descontrolado. Proteja-se contra conjuntos vazios para manter um segmento sempre ativo.

const [period, setPeriod] = useState(new Set(["weekly"]));
<SegmentedControl  selectedKeys={period}  onSelectionChange={(keys) => keys.size > 0 && setPeriod(new Set(keys))}  aria-label="Period">  <SegmentedControlItem id="weekly">Weekly</SegmentedControlItem>  <SegmentedControlItem id="monthly">Monthly</SegmentedControlItem></SegmentedControl>