Groupbox / Fieldset

Displays controls in a group with a label

Alias: "Fieldset"

<winui-groupbox> and <winui-fieldset> can be used interchangeably.

Usage

Dark mode

Autosave

Word wrap

<template>
  <winui-groupbox>
    <winui-checkbox id="check_mode" disabled>Dark mode</winui-checkbox>
    <winui-checkbox id="check_save" value="true">Autosave</winui-checkbox>
    <winui-checkbox id="check_wrap">Word wrap</winui-checkbox>
  </winui-groupbox>
</template>

Props

label optional

• Type: string
• Default: undefined

The label to be displayed for the groupbox.

Customization

Use the class name .winui-groupbox to override/customize the component's styles.

Examples

Using label

Preferences

No ads shown

Respect my privacy

Support the developer

<template>
  <winui-groupbox label="Preferences">
    <winui-checkbox id="check_ads" disabled>No ads shown</winui-checkbox>
    <winui-checkbox id="check_privacy" disabled value="true">
      Respect my privacy
    </winui-checkbox>
    <winui-checkbox id="check_support">Support the developer</winui-checkbox>
  </winui-groupbox>
</template>