CheckboxGroup

Group of checkboxes with a shared legend, built on a semantic <fieldset> element.

Live Demo

Vertical (default)

Permissions

Read

Write

Delete

Notify me via

Email

Push notifications

SMS

Permissions: read
Notifications: email, push

Horizontal

Notify me via

Email

Push notifications

SMS

With Error

Working days

Monday

Tuesday

Wednesday

Thursday

Friday

Please select at least one day.

Slot-based Composition

Use the default slot to place <orio-check-box> components directly when you need custom logic per option.

Frameworks

Vue

React

Svelte

Selected: vue

Usage

Basic

<template>
  <orio-checkbox-group
    v-model="selected"
    label="Permissions"
    :options="options"
  />
</template>

<script setup>
import { ref } from "vue";

const selected = ref(["read"]);
const options = [
  { label: "Read", value: "read" },
  { label: "Write", value: "write" },
  { label: "Delete", value: "delete" },
];
</script>

Horizontal Layout

<orio-checkbox-group
  v-model="selected"
  label="Notify me via"
  layout="horizontal"
  :options="options"
/>

With Error

<orio-checkbox-group
  v-model="selected"
  label="Working days"
  :options="dayOptions"
  :error="selected.length === 0 ? 'Select at least one day.' : null"
/>

Slot-based

Use the slot when you need per-option custom markup or icons. Pass appearance="minimal" to each CheckBox so it strips its outer margin.

<orio-checkbox-group v-model="selected" label="Frameworks">
  <orio-check-box
    appearance="minimal"
    :model-value="selected.includes('vue')"
    @update:model-value="toggle('vue')"
  >
    Vue
  </orio-check-box>
  <orio-check-box
    appearance="minimal"
    :model-value="selected.includes('react')"
    @update:model-value="toggle('react')"
  >
    React
  </orio-check-box>
</orio-checkbox-group>

Props

Prop	Type	Default	Description
modelValue	unknown[]	[]	Array of selected values (v-model)
options	CheckboxOption[]	[]	List of options to render (ignored when slot used)
label	string	undefined	Legend text for the group
layout	"vertical" | "horizontal"	"vertical"	Legend position relative to the checkboxes
size	"sm" | "md" | "lg" | "xl"	"md"	Size of the checkboxes and label
error	string | null	null	Error message displayed below the group

CheckboxOption

interface CheckboxOption {
  label: string;
  value: unknown;
}

Events

Event	Payload	Description
update:modelValue	unknown[]	Emitted when any checkbox is toggled

Slots

Slot	Description
default	Custom checkbox content. Overrides options prop. Use appearance="minimal" on each <orio-check-box>.

Accessibility

• Renders as <fieldset> with <legend> — screen readers announce the group label before each individual checkbox.
• Each <orio-check-box> inside uses a native <input type="checkbox"> with a visible <label>, so focus, keyboard, and screen reader behaviour are fully native.