Pre-selected add-ons clearly labeled with cost and easy to deselect

Pre-checked paid add-ons where the cost is only visible in the order total — not adjacent to the checkbox — are identified in the FTC's Dark Patterns Report as a manipulative checkout pattern. The Negative Option Rule also applies when a pre-checked add-on carries a recurring charge. Pre-checked marketing opt-ins at checkout additionally violate GDPR consent requirements for EU users and the CAN-SPAM Act's opt-in standards. These patterns collectively drive consumer complaints, chargebacks, and regulator attention across multiple frameworks.

Label all pre-selected add-ons with their cost immediately adjacent to the checkbox, and default marketing opt-ins to unchecked.

function AddOnOption({
  label, price, interval, defaultChecked = false, onChange
}: AddOnProps) {
  const [selected, setSelected] = useState(defaultChecked)

  return (
    <label className="flex items-start gap-3 cursor-pointer">
      <input
        type="checkbox"
        checked={selected}
        onChange={e => { setSelected(e.target.checked); onChange?.(e.target.checked) }}
        className="mt-1"
      />
      <div>
        <span className="font-medium">{label}</span>
        {/* Cost must appear adjacent to the checkbox — not only in the order total */}
        <span className="text-sm text-gray-600 ml-2">+${price}/{interval}</span>
        {defaultChecked && (
          <span className="text-xs text-amber-600 ml-2">
            (pre-selected — uncheck to remove)
          </span>
        )}
      </div>
    </label>
  )
}

For annual billing as default: show 'Billed as $288/year' prominently next to the option — not just the per-month equivalent. Marketing opt-ins must default to unchecked in all checkout flows.