Vitral 0.2
Panel

Fieldset

A native fieldset that names the controls inside it, and can collapse behind its legend.

WAI-ARIA tested

Import

main.ts
import { Fieldset } from '@vitral/vue';

Basic

Shipping

Orders placed before 2 p.m. leave the warehouse the same day. Anything later goes out on the next working day.

<script setup lang="ts">import { Fieldset } from '@vitral/vue';</script> <template>    <Fieldset legend="Shipping" style="max-width: 32rem">        <p style="margin: 0">Orders placed before 2 p.m. leave the warehouse the same day. Anything later goes out on the next working day.</p>    </Fieldset></template>

Toggleable

collapsed: false
<script setup lang="ts">import { Checkbox, Fieldset } from '@vitral/vue';import { ref } from 'vue'; const collapsed = ref(false);const email = ref(true);const push = ref(false);</script> <template>    <div style="display: grid; gap: 0.5rem; width: 100%; max-width: 32rem">        <Fieldset v-model:collapsed="collapsed" legend="Notifications" toggleable>            <div style="display: grid; gap: 0.5rem">                <Checkbox v-model="email" label="Email" binary />                <Checkbox v-model="push" label="Push" binary />            </div>        </Fieldset>        <small style="color: var(--vt-text-muted-color)">collapsed: {{ collapsed }}</small>    </div></template>

API

Read from packages/vue/src/components/Fieldset/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
legendstringThe legend's text.
toggleablebooleanMakes the legend a button that shows and hides the group.
toggleIconIconProp—

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
toggleevent: FieldsetToggleEvent—

Slots

NameSlot propsDescription
default——
legend—Replaces the legend's text.
toggleicon(props: { collapsed: boolean })—