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

The host is display: inline-flex by default. State is aria-pressed on each item's child.

w-toggles w-slot[item] > * {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

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

/* Make the buttons look like a segmented group */
w-toggles w-slot[item]:not(:first-child) > * {
  border-left: none;
}
w-toggles w-slot[item]:first-child > * {
  border-radius: 4px 0 0 4px;
}
w-toggles w-slot[item]:last-child > * {
  border-radius: 0 4px 4px 0;
}

Selector	Targets
w-toggles w-slot[item] > *[aria-pressed="true"]	Active toggle
w-toggles[disabled]	Disabled group
w-toggles[multiple]	Multi-select mode

Accessibility

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