Toggles

Single or multiple toggle button group.

Usage

<w-toggles value="bold" label="Text formatting">
  <w-slot item data-value="bold"><button>B</button></w-slot>
  <w-slot item data-value="italic"><button>I</button></w-slot>
  <w-slot item data-value="underline"><button>U</button></w-slot>
</w-toggles>

Props

Prop	Type	Default	Description
value	string	""	Selected value(s), comma-separated
multiple	boolean	false	Allow multiple toggles active
label	string	""	Group label

Slots

Slot	Element	Description
item	Button	Toggle button (use data-value)

Events

Event	Detail	Description
change	{ value }	Selection changed

Examples

Multiple Selection

<w-toggles multiple value="bold,italic" label="Formatting">
  <w-slot item data-value="bold"><button>B</button></w-slot>
  <w-slot item data-value="italic"><button>I</button></w-slot>
</w-toggles>

Styling

w-toggles w-slot[item][aria-pressed="true"] {
  background-color: #0056b3;
  color: white;
}

Accessibility

• Items have aria-pressed for toggle state
• Group has role="group" with aria-label