Checkbox, Radio and Toggle

In a list, checkboxes and radios are whole-row <label> elements, so the whole row is the tap target; an icon-checkbox or icon-radio element draws the theme's own mark:

Tag checkboxes in src/pages/note.f7

          ${['Quote', 'Idea', 'Question'].map((tag) => $h`
            <li><label class="item-checkbox item-checkbox-icon-end item-content">
              <input type="checkbox" name="tags" value="${tag.toLowerCase()}" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner"><div class="item-title">${tag}</div></div>
            </label></li>`)}

The checkout's delivery options are radios (item-radio, icon-radio): iOS marks the choice with a checkmark, Material with a filled circle (Handling Submission and Errors's figure). A toggle is a styled checkbox, <label class="toggle toggle-init"> around an input and a toggle-icon span; toggle-init adds knob dragging and a toggle:change event.

Choice controls and what convertToData returns
Control	Markup	Value in convertToData
Checkboxes	label.item-checkbox + icon-checkbox	Array of checked values
Radios	label.item-radio + icon-radio	The checked value
Toggle	label.toggle + toggle-icon	["yes"] or []

That is why the checkout tests the gift-wrap toggle with data.gift.length > 0, not data.gift === 'yes'.

MENU