core component

Checkbox

Reusable checkbox component.

@wrnexus/ui 0.2.647 props0 slots0 events

Usage

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

<Checkbox id="id" name="name" label="Checkbox" description="description" checked="false" />

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

Props and attributes

Prop	Type	Requirement	Default
`class`	`string`	Optional	`""`
`id`	`string`	Optional	`""`
`name`	`string`	Optional	`""`
`label`	`string`	Optional	`"Checkbox"`
`description`	`string`	Optional	`""`
`checked`	`boolean`	Optional	`false`
`disabled`	`boolean`	Optional	`false`

Slots

This component does not declare a slot.

Events

This component does not declare a custom event.

Source contract

Installed source: components/Checkbox.wrn

component Checkbox {
  props {
    class = ""
    id = ""
    name = ""
    label = "Checkbox"
    description = ""
    checked = false
    disabled = false
  }
  view {
    <label for="{id}" class="flex min-h-11 cursor-pointer items-start gap-3 rounded-xl p-2 transition hover:bg-slate-50 dark:hover:bg-slate-900 {class}"><input id="{id}" name="{name}" type="checkbox" checked="{checked}" disabled="{disabled}" class="mt-0.5 size-5 rounded border-slate-300 text-violet-600 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-950" /><span><span class="block text-sm font-semibold text-slate-900 dark:text-white">{label}</span><span data-show="description" class="mt-0.5 block text-sm text-slate-500 dark:text-slate-400">{description}</span></span></label>
  }
}