CheckBox

Custom checkbox component with icon states.

Live Demo

I agree to the terms and conditions

Subscribe to newsletter (loading icon when checked)

Enable notifications (unchecked icon plus)

Selections:
Terms: ✗ Not agreed
Newsletter: ✓ Subscribed
Notifications: ✗ Disabled

Usage

<template>
  <orio-check-box v-model="accepted"> I accept the terms </orio-check-box>
</template>

<script setup>
const accepted = ref(false);
</script>

Props

Prop	Type	Default	Description
modelValue	boolean	-	Checkbox state (v-model)
checkedIcon	string	undefined	Icon name to display when checked
uncheckedIcon	string	undefined	Icon name to display when unchecked

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when checkbox state changes

Slots

Slot	Props	Description
default	-	Label text/content
icon	{ checked: boolean }	Custom icon content for check state