K
KoreUI

Checkbox

Form

Checkbox personalizado con descripcion, tamanos, posicion de label y estado indeterminado.

Uso basico

<x-kore::checkbox label="Acepto los terminos y condiciones" />
<x-kore::checkbox label="Acepto los terminos y condiciones" />

Con descripcion

Texto secundario debajo del label para dar mas contexto.

Recibe actualizaciones semanales sobre tu cuenta

<x-kore::checkbox label="Notificaciones por email"
    description="Recibe actualizaciones semanales sobre tu cuenta" />
<x-kore::checkbox label="Notificaciones por email"
    description="Recibe actualizaciones semanales sobre tu cuenta" />

Indeterminate

Tercer estado para patrones de 'seleccionar todo' donde solo algunos hijos estan marcados.

<x-kore::checkbox label="Seleccionar todo" indeterminate />
<x-kore::checkbox label="Seleccionar todo" indeterminate />

Posicion del label

El label puede estar a la izquierda o derecha del checkbox.

<x-kore::checkbox label="Label a la derecha (default)" />
<x-kore::checkbox label="Label a la izquierda" label-position="left" />
<x-kore::checkbox label="Label a la derecha (default)" />
<x-kore::checkbox label="Label a la izquierda" label-position="left" />

Tamanos

Tres tamanos disponibles.

<x-kore::checkbox label="Small" size="sm" />
<x-kore::checkbox label="Medium" size="md" />
<x-kore::checkbox label="Large" size="lg" />
<x-kore::checkbox label="Small" size="sm" />
<x-kore::checkbox label="Medium" size="md" />
<x-kore::checkbox label="Large" size="lg" />

Estados

Disabled y error.

<x-kore::checkbox label="Disabled" disabled />
<x-kore::checkbox label="Disabled checked" disabled checked />
<x-kore::checkbox label="Con error" error="Debes aceptar los terminos" />
<x-kore::checkbox label="Disabled" disabled />
<x-kore::checkbox label="Disabled checked" disabled checked />
<x-kore::checkbox label="Con error" error="Debes aceptar los terminos" />

Props

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
description string|null null Texto secundario debajo del label
size string md Tamano: sm, md, lg
labelPosition string right Lado del label: left, right
indeterminate bool false Tercer estado para patrones de seleccionar todo
disabled bool false Estado deshabilitado
name string|null null Nombre para deteccion de errores
error string|null null Mensaje de error manual
showError bool true Auto-detectar errores del \$errors bag