Segmented Control

Inputs

Pill-style option selector with sliding active indicator and 3 sizes.

Instalação via CLI

$ npx kikitocn add segmented-control

Interno:

@/lib/utils

Exemplo de uso

Segmented ControlExample.tsx

import { SegmentedControl } from "@/components/ui/cn/segmented-control/SegmentedControl";

export function SegmentedControlExample() {
  return (
    <SegmentedControl />
  );
}

Props

Prop	Tipo	Padrão	Descrição
`options*`	`SegmentedControlOption[]`	—	Lista de opções: { value, label, disabled? }
`value`	`string`	`undefined`	Opção selecionada (controlled)
`defaultValue`	`string`	`undefined`	Opção inicial (uncontrolled)
`onChange`	`(value: string) => void`	`undefined`	Callback quando a seleção muda
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tamanho dos segmentos
`fullWidth`	`boolean`	`false`	Expande para 100% da largura

Voltar para Inputs

Carregando…

Segmented Control

Segmented Control

Default

Sizes

Full width

Default

Sizes

Full width