Checkbox
El componente e-checkbox captura valores booleanos o mapeados (on/off) con un contrato consistente de campo, incluyendo validacion, texto de ayuda y estados disabled/readonly.
Usa esta pagina para validar patrones de interaccion, mapeo del modelo y etiquetado accesible antes de integrar flujos con checkbox en formularios de produccion.
Uso
Usa este playground base para configurar el checkbox en contexto: color, outlined, disabled, readonly, tonal y retain-color para mantener continuidad visual entre estados.
Variantes visuales
Compara la presentacion default, outlined, tonal, retain-color, activa, disabled y readonly para mantener clara la intencion semantica en formularios densos.
Valores personalizados
Mapea el estado del checkbox a valores de dominio con true-value y false-value cuando el contrato del formulario no es estrictamente booleano.
Slots nombrados
Usa el slot label para renderizar etiquetas enriquecidas con enlaces o contexto adicional sin perder la semantica nativa del checkbox.
Validacion
Valida flujos de consentimiento con reglas obligatorias y feedback explicito de envio antes de continuar con acciones criticas.
Envia el formulario para validar la regla del checkbox.
Props
Usa la tabla de API como fuente de verdad para tipos aceptados, defaults y comportamiento heredado del campo.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | boolean | string | number | undefined |
Valor actual del checkbox. El estado marcado se resuelve por igualdad estricta contra trueValue. | ||
| trueValue | boolean | string | number | true |
Valor emitido cuando el checkbox queda marcado. | ||
| falseValue | boolean | string | number | false |
Valor emitido cuando el checkbox queda desmarcado. | ||
| tonal | boolean | false |
Muestra estilo de overlay del field dentro del slot de control sin cambiar el comportamiento. | ||
| clearable | boolean | false |
Muestra accion de limpiar cuando existe valor. | ||
| color | string | "primary" |
Color base de tema aplicado al estado e interacciones del field. | ||
| outlined | boolean | false |
Usa variante visual outlined para el contenedor del field. | ||
| disabled | boolean | false |
Desactiva interaccion y evita actualizar valor. | ||
| readonly | boolean | false |
Evita edicion manteniendo comportamiento de foco. | ||
| dense | boolean | false |
Aplica espaciado vertical mas compacto heredado de Field. | ||
| retainColor | boolean | false |
Mantiene estilo de color activo despues de foco/interaccion. | ||
| label | string | number | undefined |
Texto de etiqueta del field. | ||
| labelMinWidth | string | number | undefined |
Ancho minimo reservado para la region de etiqueta. | ||
| labelBehavior | "static" | "static" |
El comportamiento de label es estatico para controles checkbox. | ||
| inputAlign | left | right | center | start | end | "start" |
Alineacion horizontal del texto dentro del area de input/seleccion. | ||
| prependIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado en la region externa izquierda. | ||
| prependInnerIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado antes del contenido dentro del frame del input. | ||
| appendInnerIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado despues del contenido dentro del frame del input. | ||
| appendIcon | string | IconPath | IconPath[] | undefined |
Icono renderizado en la region externa derecha. | ||
| detail | string | undefined |
Texto de ayuda mostrado en el area de detalles cuando no hay errores. | ||
| detailsOnMessageOnly | boolean | false |
Muestra el area de detalles solo cuando existen mensajes/errores. | ||
| rules | FieldRule | undefined |
Reglas de validacion evaluadas contra modelValue. | ||
| detailErrors | string[] | undefined |
Mensajes de error explicitos renderizados en el area de detalles. | ||