Segmented

Selector de opción única tipo iOS para alternar vistas o rangos. Controlado o no controlado, con variantes pill y outline, iconos por opción y modo de ancho completo.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import { Segmented } from "@tsukira/ui"; <Segmented  options={[    { value: "dia", label: "Día" },    { value: "semana", label: "Semana" },  ]}  value={range}  onValueChange={setRange}/>

Ejemplos#

Playground

cambia las props y el código se regenera

options*

size

fullWidth

Inactivo

variant

disabled

Inactivo

aria-label

className

style

Controlado

value: "semana"

Variante outline · con iconos

Ancho completo · tamaño sm

API#

SegmentedProps

Prop	Tipo	Default	Descripción
`options`*	`SegmentedOption<T>[]`	—	Opciones renderizadas como items del grupo.
`value`	`T`	—	Valor controlado.
`onValueChange`	`((value: T) => void)`	—	Callback de cambio. Solo single-select.
`defaultValue`	`T`	—	Valor inicial no controlado.
`size`	`'sm' \| 'md' \| 'lg'`	`md`	Tamaño visual. Default `md`.
`fullWidth`	`boolean`	—	Ancho completo en su contenedor.
`variant`	`'pill' \| 'outline'`	`pill`	Variante visual. Default `pill`.
`disabled`	`boolean`	—	Deshabilita todo el grupo.
`aria-label`	`string`	—	Etiqueta accesible — recomendada cuando no hay label visible.
`id`	`string`	—	Nombre / id opcional para integraciones de form.
`className`	`string`	—	className extra.
`style`	`React.CSSProperties`	—	style inline.