Choice

Radio or checkbox group selection.

Usage

<w-choice value="option1" label="Select an option">
  <w-slot opt data-value="option1"><button>Option 1</button></w-slot>
  <w-slot opt data-value="option2"><button>Option 2</button></w-slot>
  <w-slot opt data-value="option3"><button>Option 3</button></w-slot>
</w-choice>

Props

Prop	Type	Default	Description
value	string	""	Selected value(s), comma-separated for multiple
multiple	boolean	false	Allow multiple selection
label	string	""	Group label
orientation	"horizontal" | "vertical"	"horizontal"	Layout direction

Slots

Slot	Element	Description
option	Button	Selectable option (use data-value)

Events

Event	Detail	Description
change	{ value }	Selection changed

Keyboard

Key	Action
ArrowRight / ArrowDown	Next option
ArrowLeft / ArrowUp	Previous option
Space	Select focused option

Examples

Multiple Selection (Checkboxes)

<w-choice multiple value="opt1,opt3" label="Select features">
  <w-slot opt data-value="opt1"><button>Feature A</button></w-slot>
  <w-slot opt data-value="opt2"><button>Feature B</button></w-slot>
  <w-slot opt data-value="opt3"><button>Feature C</button></w-slot>
</w-choice>

Accessibility

• Single selection: role="radiogroup" with role="radio" options
• Multiple selection: Options have aria-checked
• aria-label from label prop
• Roving tabindex navigation