Fieldset

Legend group, toggleable

One name for a set of controls — a radio or checkbox set, an address, notification preferences. The legend is announced together with each control inside, which a heading above a group is not. For a box around content rather than controls, use Panel or Collapsible.

Basic

Notifications

EmailPush

Beta features

Billing

InvoicesReceipts

<script setup lang="ts">
import { BlessCheckbox, BlessFieldset } from "blessing-ui";
</script>

<template>
  <div class="row" style="align-items: flex-start; flex-wrap: wrap">
    <BlessFieldset legend="Notifications" style="width: 260px">
      <div class="col">
        <BlessCheckbox :model-value="true">Email</BlessCheckbox><BlessCheckbox>Push</BlessCheckbox>
      </div>
    </BlessFieldset>
    <BlessFieldset legend="Advanced" toggleable :collapsed="true" style="width: 260px">
      <div class="col"><BlessCheckbox>Beta features</BlessCheckbox></div>
    </BlessFieldset>
    <BlessFieldset legend="Billing" disabled style="width: 260px">
      <div class="col">
        <BlessCheckbox :model-value="true">Invoices</BlessCheckbox
        ><BlessCheckbox>Receipts</BlessCheckbox>
      </div>
    </BlessFieldset>
  </div>
</template>

• disabled disables every control inside — the native cascade, no prop-drilling.
• toggleable puts the legend on a button with v-model:collapsed. Collapsed content is hidden, not removed, so its fields still submit with the form.
• #legend slot for a legend with markup; the legend prop for plain text.

Usage

import { BlessFieldset } from "blessing-ui";

API

Props

Name	Type	Default	Description
legend	string	—
toggleable	boolean	—
disabled	boolean	—
collapsed	boolean	false

Events

Name	Payload	Description
update:collapsed	[value: boolean]

Slots

Name	Scope	Description
legend	—
default	—