Checkbox lists, tri-state checkboxes, select-all patterns, and table row selection.
Casilla de tres estados personalizada
Casillas personalizadas totalmente estilizadas con 3 estados: sin marcar, marcada e indeterminada
Tres estados
Modificador de marca X
Variantes de tamaño
Patrón de seleccionar todo
Demo interactiva que muestra el estado indeterminado para selección parcial
How it works:
- When none are selected → "Select All" is unchecked
- When some are selected → count shows partial state
- When all are selected → "Select All" is checked
Casillas deshabilitadas
Estado deshabilitado con opacidad reducida
Listas de casillas
Listas de casillas básicas
Listas verticales de casillas simples con efectos al pasar el cursor: toda el área del elemento es clicable
Lista predeterminada
Con descripciones
Estados del elemento
Estados clicable, deshabilitado y bloqueado con distinta retroalimentación visual
Comparación de estados
State differences:
• Normal - Full opacity, pointer cursor, default text color
• Disabled - 50% opacity on entire item, not-allowed cursor
• Locked - 50% opacity on checkbox only, warning color text with 🔒 icon
• Normal - Full opacity, pointer cursor, default text color
• Disabled - 50% opacity on entire item, not-allowed cursor
• Locked - 50% opacity on checkbox only, warning color text with 🔒 icon
Variantes de lista
Distintos estilos para listas de casillas
Compacto
Con borde
Rayado
Listas de casillas con acciones
Listas con botones de acción para cada elemento
Lista de tareas
Diseños alternativos
Diseños en línea, de cuadrícula y de varias columnas
Diseño en línea
Diseño de cuadrícula
Diseño de dos columnas
Diseño de tres columnas
Tabla interactiva con casillas
Funcionalidad de seleccionar todo y selección de filas
| Name | Status | Actions | ||
|---|---|---|---|---|
| John Doe | john@example.com | Active |
|
|
| Jane Smith | jane@example.com | Active |
|
|
| Bob Johnson | bob@example.com | Pending |
|
|
| Alice Williams | alice@example.com | Active |
|
|
| Charlie Brown | charlie@example.com | Inactive |
|