Radio

Usage

Components are auto-discovered. Use the component directly in any .wrn view:

<Radio
  id="id"
  name="choice"
  value="value"
  label="Option"
  description="description"
/>

Legacy mount name: data-component="Radio".

Props and attributes

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Radio.wrn

component Radio {
  props {
    class = ""
    id = ""
    name = "choice"
    value = ""
    label = "Option"
    description = ""
    checked = false
    disabled = false
  }
  view {
        <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-3 transition hover:border-violet-400 dark:border-slate-800 {class}">
        <input id="{id}" name="{name}" type="radio" value="{value}" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 border-slate-300 text-violet-600 focus:ring-violet-500" />
        <span>
        <span class="block text-sm font-semibold">{label}</span>
        <span data-show="description" class="text-sm text-slate-500">{description}</span>
        </span>
        </label>
    }
}