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>

Styling

The host gets display: flex with row/column direction set automatically by [orientation]. State is exposed as aria-checked on each option's child element.

/* Each option */
w-choice w-slot[opt] > * {
  padding: 0.5rem 1rem;
  cursor: pointer;
}

/* Selected option */
w-choice w-slot[opt] > *[aria-checked="true"] {
  background: #eef2ff;
  border-color: #6366f1;
}

/* Disabled */
w-choice[disabled] w-slot[opt] > * {
  opacity: 0.5;
}

/* Vertical (default) vs horizontal */
w-choice[orientation="horizontal"] {
  flex-wrap: wrap;
}

Selector	Targets
w-choice w-slot[opt] > *[aria-checked="true"]	Currently selected
w-choice w-slot[opt] > *[aria-disabled="true"]	Disabled options
w-choice[orientation="horizontal"]	Horizontal layout
w-choice[mode="checkbox"]	Checkbox mode group

Accessibility

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