CheckboxGroup

Група чекбоксів зі спільною легендою, побудована на семантичному елементі <fieldset>.

Живе демо

Вертикально (за замовчуванням)

Дозволи

Читання

Запис

Видалення

Сповіщати мене через

Email

Push-сповіщення

SMS

Дозволи: read
Сповіщення: email, push

Горизонтально

Сповіщати мене через

Email

Push-сповіщення

SMS

З помилкою

Робочі дні

Понеділок

Вівторок

Середа

Четвер

П'ятниця

Оберіть принаймні один день.

Композиція через слот

Використовуйте слот за замовчуванням, щоб розмістити компоненти <orio-check-box> напряму, коли для кожної опції потрібна власна логіка.

Фреймворки

Vue

React

Svelte

Вибрано: vue

Використання

Базове

<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>

Горизонтальне розміщення

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

З помилкою

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

Через слот

Використовуйте слот, коли для кожної опції потрібна власна розмітка чи іконки. Передайте appearance="minimal" кожному CheckBox, щоб прибрати його зовнішній відступ.

<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>

Пропси

Проп	Тип	За замовчуванням	Опис
modelValue	unknown[]	[]	Масив вибраних значень (v-model)
options	CheckboxOption[]	[]	Список опцій для рендеру (ігнорується, якщо використано слот)
label	string	undefined	Текст легенди групи
layout	"vertical" | "horizontal"	"vertical"	Позиція легенди відносно чекбоксів
size	"sm" | "md" | "lg" | "xl"	"md"	Розмір чекбоксів і підпису
error	string | null	null	Повідомлення про помилку під групою

CheckboxOption

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

Події

Подія	Дані	Опис
update:modelValue	unknown[]	Генерується під час перемикання будь-якого чекбокса

Слоти

Слот	Опис
default	Власний вміст чекбоксів. Перекриває проп options. Використовуйте appearance="minimal" на кожному <orio-check-box>.

Доступність

• Рендериться як <fieldset> з <legend> — скрінрідери озвучують підпис групи перед кожним чекбоксом.
• Кожен <orio-check-box> всередині використовує нативний <input type="checkbox"> з видимим <label>, тож фокус, клавіатура й поведінка скрінрідерів повністю нативні.