CataUiInputCheckbox

A customizable checkbox input component that supports text labels and tooltips.

Basic Usage

<CataUiInputCheckbox label="My checkbox" v-model="myModelValue" />

Examples

Basic Checkbox

<CataUiInputCheckbox 
  label="My checkbox" 
  v-model="myModelValue" />

Checkbox with Tooltip

<CataUiInputCheckbox 
  label="My checkbox" 
  tooltip="Additional information about this checkbox" 
  v-model="myModelValue" />

Disabled Checkbox

<CataUiInputCheckbox 
  label="Disabled checkbox" 
  disabled 
  v-model="myModelValue" />

Tips

The checkbox component works exactly like a normal <input type="checkbox" /> would. You can add standard HTML input attributes such as name, value, disabled, etc. just like you normally would with a standard checkbox input.

Props

PropDescriptionTypeDefaultRequired
labelThe text label displayed next to the checkboxString''false
tooltipText displayed in a tooltip when hoveringString''false

v-model

The component supports v-model binding with the following type:

defineModel({
    type: [String, Number, Boolean, Array, null],
    required: true,
});

Events

All standard HTML input events are supported, including:

EventDescription
changeEmitted when the checkbox state changes
focusEmitted when the checkbox receives focus
blurEmitted when the checkbox loses focus