Componentes visibles
| Muestra | Qué puedes probar |
|---|---|
CrmChipSelectField y CardSelectChip | Cambiar el mismo estado desde un campo o desde un chip compacto. |
CardMultiSelectChip | Buscar y seleccionar varias etiquetas. |
AdvisorMenu | Elegir un responsable con su avatar y correo ficticio. |
CrmCheckboxButton y CrmBooleanChipSwitch | Marcar una opción y comparar el estado deshabilitado. |
OnboardingThemeChoices | Elegir Claro u Oscuro desde dos controles compactos, con marca visible y aria-pressed; la demo no modifica el tema global. |
OnboardingChoiceCard | Elegir Tabla o Kanban desde una tarjeta completa. |
Todos los valores son locales. Las tarjetas de elección cambian la preferencia de esta muestra; no modifican otras demos.
Cuándo usar
CrmChipSelectField sirve para opciones de formularios; CardSelectChip para editores compactos. Usa CrmCheckboxButton para selección booleana. La asignación de responsables usa AdvisorMenu.
Propiedades y variantes
| Propiedad | Contrato |
|---|---|
value / options / onChange | Valor string, opciones label/value y callback para selectores. |
disabled / isLoading / error | Estados del selector de formulario. |
checked / onCheckedChange | Estado controlado del checkbox. |
label / ariaLabel | Etiqueta visible o nombre accesible del control. |
Estados y accesibilidad
Verifica selección, cierre por Escape, foco y estado deshabilitado.
Evitar
No uses select nativo ni un selector genérico para responsables. Un selector deshabilitado no sustituye la autorización del servidor.
Geometría compartida
Los campos y opciones usan --vee-radius-control (14 px); los desplegables
compactos usan --vee-radius-panel (16 px). CardSelectChip y AdvisorMenu
usan --vee-radius-pill en una línea. CardSelectChip pasa al radio de control al mostrar descripción.
La forma se conserva en reposo, hover, foco y ambos temas.
CardSelectChip admite preferredDropdownHeight para ampliar la altura del menú en portal y dropdownBoundary="viewport" para aprovechar la ventana en formularios con poco espacio. Por defecto conserva el límite del contenedor; el menú siempre se ajusta al espacio visible y mantiene scroll. La demo de Estado compacto muestra altura preferida de 440 px y límite de ventana. FinanceCategoryTreeSelect reutiliza esta configuración.
CrmBooleanChipSwitch admite tone="primary" para el estado activo grafito, con la superficie y tokens globales de las acciones primary. fullWidth lo alinea al ancho del contenedor y mantiene etiqueta e interruptor en extremos opuestos. El estado apagado conserva el gris neutro. La demo Selectores incluye edición y estado deshabilitado de esta variante.
PlatformIconSelectField presenta un disparador cuadrado glass de 44 px alineado con los inputs. Recibe value, onChange, options (value, label, icon), label y disabled. Al pulsarlo abre una cuadrícula de cuatro columnas mediante CardSelectChip con portal; cada icono tiene nombre accesible, color semántico y cierre al elegir; la opción activa usa selección primary e icono blanco para conservar contraste. El disparador centra su icono en ambos ejes. La demo Selectores incluye ocho opciones.
PlatformIconSelectField permite color en cada opción: aplica el fondo plástico de color y el icono blanco tanto a las opciones como al disparador. La opción seleccionada mantiene su color y se distingue por un anillo grafito. La demo Selectores muestra los ocho colores.