LifeUI
1.53.2
Inicio

Toggle group

Se utiliza para activar o desactivar entre varias opciones

Selección múltiple

Utiliza la propiedad mode="multiple" para poder seleccionar varias opciones agrupadas.

Tamaño

Utiliza la propiedad size para cambiar el tamaño de los botones.

Controlar estado

Utiliza las propiedades value y onValueChange para controlar el estado del toggle group

Item seleccionado:edit

Controlar estado multiple

Items seleccionados:edit

Personalización

Props

Toggle Group

PropTipoRequeridoDescripción
defaultValuestring[]-El valor de las opciones que deben estar seleccionada al renderizarse inicialmente. Usalo cuando no controles el estado
valuestring[]-El valor controlado de las opciones. Debes usarlo junto con onValueChange
onValueChange(value: string[]) => void-Manejador de evento cuando cambia el valor
mode'single' | 'multiple'-El modo de seleccion
classNames{ base?: string; item?: string }-Clases personalizadas para diferentes partes del componente.

Toggle item

PropTipoRequeridoDescripción
valuestring-Un valor unico para el elemento