K
KoreUI

Radio

Form

Botones de radio con wrapper de grupo para layouts verticales e inline.

Uso basico

<x-kore::radio name="plan" value="basic" label="Basico" />
<x-kore::radio name="plan" value="pro" label="Pro" />
<x-kore::radio name="plan" value="basic" label="Basico" />
<x-kore::radio name="plan" value="pro" label="Pro" />

Radio Group

Envuelve los radios con label, manejo de errores y control de layout.

<x-kore::radio-group label="Selecciona tu plan">
    <x-kore::radio name="plan-group" value="free" label="Gratis" />
    <x-kore::radio name="plan-group" value="pro" label="Pro" />
    <x-kore::radio name="plan-group" value="enterprise" label="Enterprise" />
</x-kore::radio-group>
<x-kore::radio-group label="Selecciona tu plan">
    <x-kore::radio name="plan-group" value="free" label="Gratis" />
    <x-kore::radio name="plan-group" value="pro" label="Pro" />
    <x-kore::radio name="plan-group" value="enterprise" label="Enterprise" />
</x-kore::radio-group>

Con descripcion

Texto secundario para dar mas contexto a cada opcion.

$0/mes

$29/mes

Contactanos

<x-kore::radio-group label="Selecciona tu plan">
    <x-kore::radio name="plan-desc" value="free" label="Gratis" description="$0/mes" />
    <x-kore::radio name="plan-desc" value="pro" label="Pro" description="$29/mes" />
    <x-kore::radio name="plan-desc" value="enterprise" label="Enterprise" description="Contactanos" />
</x-kore::radio-group>
<x-kore::radio-group label="Selecciona tu plan">
    <x-kore::radio name="plan-desc" value="free" label="Gratis" description="$0/mes" />
    <x-kore::radio name="plan-desc" value="pro" label="Pro" description="$29/mes" />
    <x-kore::radio name="plan-desc" value="enterprise" label="Enterprise" description="Contactanos" />
</x-kore::radio-group>

Layout inline

Disposicion horizontal usando flex gap-4 en lugar de space-y-2.

<x-kore::radio-group label="Vista" inline>
    <x-kore::radio name="layout" value="grid" label="Grid" />
    <x-kore::radio name="layout" value="list" label="Lista" />
    <x-kore::radio name="layout" value="table" label="Tabla" />
</x-kore::radio-group>
<x-kore::radio-group label="Vista" inline>
    <x-kore::radio name="layout" value="grid" label="Grid" />
    <x-kore::radio name="layout" value="list" label="Lista" />
    <x-kore::radio name="layout" value="table" label="Tabla" />
</x-kore::radio-group>

Tamanos

Tres tamanos disponibles.

<x-kore::radio name="size-demo" value="sm" label="Small" size="sm" />
<x-kore::radio name="size-demo" value="md" label="Medium" size="md" />
<x-kore::radio name="size-demo" value="lg" label="Large" size="lg" />
<x-kore::radio name="size-demo" value="sm" label="Small" size="sm" />
<x-kore::radio name="size-demo" value="md" label="Medium" size="md" />
<x-kore::radio name="size-demo" value="lg" label="Large" size="lg" />

Estados

Disabled y error.

<x-kore::radio name="state-demo" value="disabled" label="Disabled" disabled />
<x-kore::radio name="state-error" value="error" label="Con error" error="Selecciona una opcion" />
<x-kore::radio-group label="Grupo con error" error="Este campo es requerido">
    <x-kore::radio name="group-error" value="a" label="Opcion A" />
    <x-kore::radio name="group-error" value="b" label="Opcion B" />
</x-kore::radio-group>
<x-kore::radio name="state-demo" value="disabled" label="Disabled" disabled />
<x-kore::radio name="state-error" value="error" label="Con error" error="Selecciona una opcion" />
<x-kore::radio-group label="Grupo con error" error="Este campo es requerido">
    <x-kore::radio name="group-error" value="a" label="Opcion A" />
    <x-kore::radio name="group-error" value="b" label="Opcion B" />
</x-kore::radio-group>

Props de Radio

Prop Tipo Default Descripción
label string|null null Texto de la etiqueta
description string|null null Texto secundario
value string|null null Valor del radio
size string md Tamano: sm, md, lg
disabled bool false Estado deshabilitado
name string|null null Nombre del grupo
error string|null null Mensaje de error manual
showError bool true Auto-detectar errores del \$errors bag

Props de Radio Group

Prop Tipo Default Descripción
label string|null null Etiqueta del grupo
hint string|null null Texto de ayuda
inline bool false Layout horizontal
error string|null null Mensaje de error manual
name string|null null Nombre para deteccion de errores
required bool false Indicador de obligatorio
showError bool true Auto-detectar errores del \$errors bag